Ecommerce Strategia WooCommerce/Magento by liviob

E-commerce : Strategia e Strumenti

https://www.liviobollini.it

E-commerce : Strategia e Strumenti Indice SOMMARIO .......................................................................................................................................... 5 E-COMMERCE STRATEGIA ................................................................................................................ 6 Un’attivita’ con E-commerce:........................................................................................................... 6 Fattibilità e Redditivita’. ............................................................................................................................. 6 I vantaggi di E-commerce ........................................................................................................................... 8 Aspetti normativi e Fiscali .......................................................................................................................... 8 Inizio di un’attività da zero. ....................................................................................................................... 9 Per chi ha gia’ una attivita’......................................................................................................................... 9 Indicazione della Partita IVA .................................................................................................................. 10 Diritti dei consumatori ............................................................................................................................. 10 Privacy ..................................................................................................................................................... 11

Il sito di E-commerce – Contenuti.................................................................................................. 11 Qualche numero prima di cominciare ..................................................................................................... 11 Home page, cosa deve contenere .............................................................................................................. 12 Catalogo Prodotti, cosa deve contenere ................................................................................................... 12 Pagina dettaglio prodotti ........................................................................................................................... 13 Up selling/Cross selling .............................................................................................................................. 13 Sono termini molto importanti ma non sempre conosciuti, pero’ un buon utilizzo puo’ significativamente aumentare le vendite, oltre a migliorare l’esperienza dell’utente. ................................................................ 14 Scegliere la piattaforma............................................................................................................................. 14 La scelta di Magento ............................................................................................................................... 15

E-COMMERCE SETTAGGI MAGENTO ............................................................................................. 16 Come installare Magento in locale sul proprio MAC. ................................................................. 16 Prerequisisti ................................................................................................................................................ 16 Creare un db............................................................................................................................................... 16 Istallazione .................................................................................................................................................. 17 Altre operazioni.......................................................................................................................................... 20 Performance ............................................................................................................................................... 21 Reindex Flat table ..................................................................................................................................... 21 Traduzione Magento lingua Italiana........................................................................................................ 22 Principali settaggi di Magento .................................................................................................................. 23 Gerarchia di Magento ............................................................................................................................... 24 La creazione di un web site multiview ad esempio multilingua avviene con le seguenti istruzioni ........... 24 Disabilita Cache ......................................................................................................................................... 25 Settaggi Magento: STORES > CONFIGURATION .............................................................................. 26 Stores Configuration GENERAL ............................................................................................................. 26 Stores Configuration Web......................................................................................................................... 27 Currency Setup ........................................................................................................................................ 27 Store email adresses ................................................................................................................................ 27 Contact ..................................................................................................................................................... 27 Stores Configuration Sales ........................................................................................................................ 27 Stores Configuration Customer ................................................................................................................ 28 Newsletter ................................................................................................................................................ 28 Customer configuration ........................................................................................................................... 28 Whish list ................................................................................................................................................. 28 Promotion list .......................................................................................................................................... 29 Stores Configuration Catalog ................................................................................................................... 29 Inventory.................................................................................................................................................. 29 SITE MAP ............................................................................................................................................... 29

Configurazione Tasse ...................................................................................................................... 30

https://www.liviobollini.it

E-commerce : Strategia e Strumenti Stores>Tax Rules. ...................................................................................................................................... 30 Customer Group ........................................................................................................................................ 31

Legare Magento a MailChimp ....................................................................................................... 32 Ottenere estensione Magento Connect ..................................................................................................... 32 Installare l’estensione su sito Magento. .................................................................................................. 33 Configurare MageMonkey ........................................................................................................................ 34 Risoluzione di problemi ............................................................................................................................. 35

Metodi di spedizione ........................................................................................................................ 36 Flat rate ....................................................................................................................................................... 36 Free shipping .............................................................................................................................................. 36 Table Rates ................................................................................................................................................. 37 Configurare Table Rate metodo .............................................................................................................. 37 Preview di Table Rate ............................................................................................................................. 37 Import dei dati della tabella ..................................................................................................................... 38

Metodi di pagamento ....................................................................................................................... 38 Metodi di pagamento esistenti .................................................................................................................. 38 Configurare Paypal come metodo di pagamento .................................................................................... 39 Credenziali PayPal................................................................................................................................... 39 Basic setting Paypal Magento ................................................................................................................. 40 Advanced setting PayPal ......................................................................................................................... 40 Assegni o Vaglia ......................................................................................................................................... 41 Bonifico Bancario ....................................................................................................................................... 41

Creare un Coupon in Magento ....................................................................................................... 41 Rule Information........................................................................................................................................ 42 Conditions ................................................................................................................................................... 42 Actions......................................................................................................................................................... 42

Gestione ordini in Magento ............................................................................................................ 42 Creare nuovo ordine .................................................................................................................................. 42 Fattura ........................................................................................................................................................ 43 Credit Memo .............................................................................................................................................. 43 Billing Agreement ...................................................................................................................................... 44 Modificare Content .................................................................................................................................... 45 Menu’ e Categorie ...................................................................................................................................... 46 Prodotto ...................................................................................................................................................... 48 Prodotto semplice .................................................................................................................................... 48 Informazioni Generali ......................................................................................................................................... 49 Content ................................................................................................................................................................ 49 Immagine ............................................................................................................................................................ 49 S.E.O ................................................................................................................................................................... 49 UP and Cross Selling .......................................................................................................................................... 49 Design ................................................................................................................................................................. 50

Prodotto configurabile ............................................................................................................................. 50 La creazione di un prodotto configurabile, richiede la esecuzione di 4 step. ..................................................... 50 Step 1 :attribute ................................................................................................................................................... 50 Create new attribute ............................................................................................................................................ 51 Step 2 : scegliere i valori delle opzioni ............................................................................................................... 52 Step 3: Immagini e quantita’ ............................................................................................................................... 52 Step 4: Sommario ................................................................................................................................................ 52

Prodotto scaricabile ................................................................................................................................. 53 CONTENT: ................................................................................................................................................ 54 Strumenti ................................................................................................................................................. 54 Blocks ...................................................................................................................................................... 54 Variabili ................................................................................................................................................... 54 Widgets .................................................................................................................................................... 56

https://www.liviobollini.it

E-commerce : Strategia e Strumenti Pagine ...................................................................................................................................................... 56 Home Page............................................................................................................................................... 57 Risoluzione dei Problemi ........................................................................................................................ 57

E-commerce Creare un tema ........................................................................................................ 58 Struttura ..................................................................................................................................................... 58 â&#x20AC;˘ default_head_blocks: collega i file nella sezione head : ..................................................................... 62 Less metodi di stile ..................................................................................................................................... 63 Breve introduzione a Less ....................................................................................................................... 63 Compilazione Less in Magento2 ............................................................................................................. 64 Per compilare Less in Magento occorre: ................................................................................................. 64 File di stile del tema Magento 2 ............................................................................................................. 64 Bootstrap Responsive ................................................................................................................................ 65 Attivazione del tema .................................................................................................................................. 66 Magento setup ......................................................................................................................................... 66 Creazione contenuto home page & menu ................................................................................................ 66 Esempio home page con Bootstrap ......................................................................................................... 67 Pagina ContactUs .................................................................................................................................... 68 Risoluzione dei problemi ........................................................................................................................... 69 Non aggiorno pagina prodotto ............................................................................................................................ 69 Non visualizzo home page .................................................................................................................................. 69 Layout ................................................................................................................................................................. 69

Inserire Blocchi statici ............................................................................................................................... 70 Creare layout 2 colonne ........................................................................................................................... 70 Creare un Block: ...................................................................................................................................... 70 Creare Widget:......................................................................................................................................... 70 Templates .................................................................................................................................................... 71 Creare una cartella nel tema .................................................................................................................... 71 File copyright.phtml ................................................................................................................................ 71 Pagine catalogo/prodotto ......................................................................................................................... 72 Static Deploy ........................................................................................................................................... 72

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

SOMMARIO Sempre di più sta crescendo il business on line. In queste pagine una sintesi di argomenti molto attuali. Fra questi: • Strategie di Marketing. Si partira’ dal business plan, cioe’ la definizione degli obiettivi, dei costi e quindi dal risultato atteso. Successivamente gli aspetti legali e amministrativi, i contenuti di un sito di e-commerce. • Magento : I settaggi di questo importante strumento, la personalizzazione attraverso la creazione di temi e l’utilizzo dei temi. creati appositamante • WooCommerce: Un plugin di Wordpress per la creazione di siti E-commerce attraverso il piu’ famoso CMS.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

E-COMMERCE STRATEGIA Un’attivita’ con E-commerce: Fattibilità e Redditivita’. Prima di lanciarsi in un progetto e-commerce che richiede sia competenze tecniche che organizzative, occorre chiedersi il proprio business puo’ essere svolto attraverso E-Commerce. Occorre cioe’ porsi le domande se: -Il business puo’ funzionare su Internet - esistono le competenze tecniche e organizzative -l’impegno di tempo è compatibile, con la struttura organizzativa Occorre, infatti, valutare che E-commerce non è solo un sito WEB, ma soprattutto una scelta strategica. Va affrontato percorrendo quelli che sono i passi di una strategia di Marketing : • Analisi del Mercato e della concorrenza. In particolare studiare se esiste gia’ una presenza in rete della concorrenza il suo posizionamento. Le analisi sulla concorrenza in rete comprendono i seguenti parametri: ! Quanti e quali competitor. Se nazionali o locali. ! Ampiezza del sito. ! Che posizione hanno i concorrenti nella ricerca Google. ! Come e’ presentato il prodotto. ! Visibilità e accessibilita’ del prodotto. ! Gli argomenti di vendita usati: parole chiavi e immagini. ! I prezzi rispetto alla rete di vendita tradizionale. ! La politica di vendita: codici promozionali. ! L’organizzazione logistica e la politica di reso. https://www.liviobollini.it

E-commerce : Strategia e Strumenti

! L’assistenza online: prima e dopo la vendita. ! Servizi accessori. ! I sistemi di pagamento offerti. L’analisi di Mercato deve essere poi seguita dalle scelte di differenziazione, la scelta degli argomenti di vendita, la specificita’ del prodotto che viene offerto nel sito e-commerce. • Potenzialita’ del venduto. Dopo aver deciso in base all’analisi di mercato la strategia, stimare l’obiettivo cioè i volumi di venduto. • Stima di costi diretti e Indiretti. Questo è un punto

fondamentale, che puo’ essere eseguito solo dopo aver deciso: ! Costo e tempo di avvio dell’attivita’ di E-commerce: costruzione del sito e inserimento dei prodotti. ! Costi amministrativi e fiscali per l’avvio dell’attivita’ ecommerce (vedi parte dedicata) ! Se il prodotto è gestito in stock o reperito esternamente dopo ogni ordine. ! Le quantità in stock. ! La politica del trasporto e i resi. ! Gli investimenti di promozione, anche sui social Network, campagne di email, pubblicita’ tradizionale ! Assistenza online e politica dei resi ! Spese amministrative (di solito 15% del costo del prodotto) • Ritorno dell’investimento (R.O.I) Dopo aver definito il costo e la politica di vendita attraverso un analisi del mercato, si puo’ cosi’ ottenere un importante parametro chiamato R.O. I (Return of Investement) che indica in quanto tempo l’investimento effettuato viene restituito. Normalmente si considera nelle aziende si considera: ! Ottimo: se i costi sono riassorbiti entro 6 mesi ! Buono: entro 8 mesi, con limite a 1 anno ! Accettabile/Scarso: entro 15 mesi ! Non fattibile: oltre 15 mesi

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Un esempio di questa analisi, nel capitolo strategia di Marketing : https://www.liviobollini.it/tutorStrategia.php

I vantaggi di E-commerce Un sito e-commerce fatto bene, facilmente navigabile e dove sono ben evidenziate le informazioni importanti per gli acquirenti offre: -Ampliamento significativo del mercato : il prodotto diventa visibile ben oltre i canali di comunicazione tradizionali. Questo alla condizione che il sito sia ottimizzato, rispetto alle regole SEO. https://www.liviobollini.it/tutorSeo e venga definita una chiara politica di comunicazione attraverso Newsletter: https://www.liviobollini.it/tutormailmktg e Social Network: https://www.liviobollini.it/tutorFacebook -Miglior Servizio al Cliente: il negozio online è aperto 24 ore per 7 giorni . Anche l’assistenza, puo’ essere fornita con un range molto piu’ ampio del negozio tradizionale. Valutare se necessario affidarsi a un call center per l’ assistenza online. -Prezzi inferiori: infatti sui prodotti online non gravano i costi dei negozi fisici. -Informazioni sui prodotti: informazioni su i prodotti che hanno avuto il maggior interesse da parte dell’utente, da quali canali arrivano gli utenti (social o ricerca online),posizione geografica. Aspetti normativi e Fiscali Quando si parla di E-comerce si puo’ distinguere tra :

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

-commercio diretto: Quando tutte le attivita’ sono svolte online . Ad esempio il download di un ebook, l’acquisto di un software , download fotografie o video. -commercio indiretto: Quando l’acquisto è online, ma le altre attività come ad esempio la consegna è effettuata con i metodi tradizionali. Ad esempio l’acquisto di un prodotto fisico.

Inizio di un’attività da zero. In questo caso occorre: -Costituzione della societa’ attraverso un notaio, richiesta casella posta certificata PEC . -Iscrizione al registro delle imprese tenuto dalle camere di commercio, per la richiesta di Partita Iva. Comunicazione all’agenzia dell’entrate dell’ indirizzo del sito Web e i dati del service provider (modelli AA9/10). In caso di Societa’ la presentazione è effettuata dal notaio mentre in caso di ditta individuale è effettuata dal commercialista. La sede della camera di Commercio è quella competente, cioè quella ove ha sede legale la Azienda. -Presentazione del modello Inizio attivita’, presso il comune competente territorialmente. Tale presentazione puo’ avvenire o per via telematica oppure mediante posta elettronica certificata -Deposito al registro delle imprese dell’avvenuta comunicazione al Comune di Inizio attività.

Per chi ha gia’ una attivita’ -Segnalazione inizio attività -Comunicazione all’agenzia delle entrate dell’indirizzo del sito Web e Provider -Comunicazione al Registro delle imprese di inizio attivita’, insiema alla documentazione precedente

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Indicazione della Partita IVA A partire dal 2001 per le attivita’ commerciali il numero di Partita Iva va indicato nella home page o in altre dove richiesto.

Diritti dei consumatori Il Codice del consumo è stato emanato con il Decreto legislativo 6 settembre 2005, n. 206, comprende la maggior parte delle disposizioni emanate dall'Unione Europea nel corso degli ultimi venticinque anni per la protezione del consumatore. Da ricordare: •

•

Diritto di Recesso Il consumatore ha 14 giorni di tempo per restituire, per qualsiasi ragione, la merce acquistata online. Restituzione dei beni È possibile restituire la merce anche se parzialmente deteriorata. In questo caso il consumatore è responsabile solo dell’eventuale diminuzione di valore in determinati casi, stabiliti in anticipo Esistono pero’ delle eccezioni alla restituzione tipo : prodotti informatici sigillati, aperti dopo la consegna, beni che scadono. Quanto poi ai costi di trasporto per la restituzione, vanno chiaramente indicati nei termini di vendita. Propaganda ingannevole E’ vietata ogni propaganda/pubblicita’ ingannevole. L’utente deve chiaramente esprimere la propria volonta’ e quindi sono vietate le caselle preselezionate. Eventuali sovraprezzi, non possono essere nascosti. Termini e condizioni di vendita Il venditore deve redigere documento che contiene tali condizioni

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Privacy Come tutti i siti Web che gestiscono i dati personali, la modalita’ di gestione dei dati va chiaramente indicata attraverso una pagina dedicata. Cosi’ come descritto nella sezione Privacy https://www.liviobollini.it/tutorPrivacy Per maggiori informazioni sui diritti dei consumatori si puo’ consultare il sito del Ministero dello sviluppo economico http://www.sviluppoeconomico.gov.it/index.php/it/per-il-cittadino/tutela

Il sito di E-commerce – Contenuti. Cosa deve contenere un sito di e-commerce: Requisiti Qualche numero prima di cominciare Chi compra on line : • 18,8 milioni di persone compera online in Italia (2016) • 14,6% crescita degli acquirenti on line, ogni anno • 53% acquirenti sono uomini, 47% donne Come si comporta chi acquista su E-commerce • • • •

64% preferisce acquistare da casa, ricavandosi del tempo 93% acquista non solo per se ma anche per altri 30% decide in pochi minuti 81% spende entro i 300 €

I prodotti più acquistati: • • • • • •

Viaggi, biglietti, turismo Biglietti eventi Elettronica (foto e computer) e elettrodomestici Assicurazioni Abbigliamento Libri digitali

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• Cosmetici Conversion rate • 1,5% è il conversion rate dei siti Ecommerce • 66% delle persone acquista se è facile • Velocita e performance sono determinanti • Avere una chat nel sito, aumenta le vendite Home page, cosa deve contenere • Logo aziendale • Un sotto titolo che spiega cosa si fa • Una chiara indicazione del prodotto e a che tipo di Clienti si rivolge • Illustrazione dei prodotti in vista • Poche call to action tipo iscrizione alle news letters • Un menu di primo livello che indichi le categorie di prodotto, ma anche la pagina contatti, privacy, FAQ • Loghi riconoscibili come paypal, associazioni di categoria etc • Assistenza anche on line attraverso chat • Pulsante di ricerca • Partita IVA, in base alle normative • Possibilmente suggerimenti di prodotto in base agli acquisti • Web Analitycs: Importante strumento per misurare visite e tasso di rimbalzo. Il tasso di rimbalzo è molto importante perché misura quante volte un utente capitato sulla home page, decide di lasciare il sito . Se questo tasso è maggiore del 50%, vuole dire che la home page non è ben fatta e va revisionata SEO: Ottimizzazione per i motori di ricerca Una tecnica da applicare come per tutti i siti Web https://www.liviobollini.it/tutorSeo Catalogo Prodotti, cosa deve contenere

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Il catalogo Prodotti è la chiave per il successo del sito, la parte centrale del sito è quella dove passa la maggior parte degli utenti. Deve quindi essere ben strutturato e chiaro. Deve contenere : • Descrizione e immagini delle categorie del catalogo • Iscrizione alla newsletter • Supporto via mail e/o chat • breadcrump Pagina dettaglio prodotti La pagina di dettaglio dei prodotti è rivolta agli acquirenti e deve rispondere a tutte le domande proprio di questi. Deve contenere: • • • • • • • • • • •

Nome del prodotto Marchio Varianti Descrizione Immagine Benefici e plus Cosa lo differenzia Il prezzo La consegna Offerte o sconti Up selling/Cross selling

Up selling/Cross selling Up selling: rappresenta l’indicazione di un prodotto con una qualità e quindi un costo maggiore. Ad esempio quando si sceglie un obiettivo per una macchina fotografica, il sito Ecommerce mostra obiettivi di qualita’ maggiore con una luminosita’ migliore e quindi un diaframma maggiore. Cross selling: un prodotto collegato. Ad esempio se si compra un libro, https://www.liviobollini.it

E-commerce : Strategia e Strumenti

un’altro con argomenti equivalenti. Se si acquista una macchina fotografica ad esempio una tipologia di obiettivi. Se si acquista un computer, propone una borsa per contenerlo. Down selling: In questo caso si fa vedere un prodotto poi un altro meno costoso. Viene quindi esaltata la competività del nuovo prodotto.

Sono termini molto importanti ma non sempre conosciuti, pero’ un buon utilizzo puo’ significativamente aumentare le vendite, oltre a migliorare l’ esperienza dell’utente. Scegliere la piattaforma Per costruire un sito e-commerce esistono le seguenti alternative: -Magento -Prestashop -WooCommerce di WordPress -VirtueMart di joomla Non ho poi citato la scelta di costruire una piattaforma autonoma con PHP per la complessità di realizzazione . La piattaforma piu’ completa, con piu’ opzioni è Magento, pero’ proprio per questa ricchezza è la piu’ complessa e richiede uno specialista. Woocommerce, è una derivazione di Wordpress, nato come Blog. E’ un buono strumento per piccole realtà aziendali che un numero limitato di prodotti. In ogni caso un sito E-commerce richiede competenza e risorse di tempo non indifferenti. E’ una vetrina del prodotto che si vuole commercializzare e deve essere fatta da persone esperte, sia tecnicamente che di marketing.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Cosi’ come la vetrina di un negozio fisico, un sito E-commerce richiede scelte, esperienza, competenza.

La scelta di Magento I vantaggi della scelta di Magento sono : • Ottimizzazione Seo e strumenti di marketing • Possibilità di inserire immagini multiple per ogni prodotto; • Immagini ottimizzate per essere fruibili al meglio (con possibilità di zoom); • La visualizzazione di report e la facile gestione degli ordini; • Il batch di importazione e di esportazione del catalogo; • La spedizione di mail per ciascun ordine a più indirizzi contemporaneamente; • La possibilità di collegare più negozi online; Infine attraverso Magento connect, sono disponibili numerose estensioni, connettori che consento di collegare Magento a sistemi gestionali ERP e CRM.

Questo sito fornisce la piu’ importante documentazione per Magento http://docs.magento.com/m2/ce/user_guide/getting-started.html

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

E-COMMERCE SETTAGGI MAGENTO Come installare Magento in locale sul proprio MAC. Prerequisisti •

PHP: versione 5.5 o meglio 7

•

MySQL almeno 2.1.2: Compatibile con MySQL 5.7

Per installare localmente Magento 2, questi i passi da eseguire: -scaricare l’ultima versione di Mamp, come descritto nel link https://www.liviobollini.it/tutorPhpMamp.php Creare un db In MAMP :Open web start page>Strumenti >Phpmyadmin

-Devono poi essere scaricati i file di Magento al sito https://magento.com/tech-resources/download In questa fase occorre : -creare un account Magento -scegliere : • versione https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• formato Suggerita l’ultima versione, formato .zip. Successivamente la cartella scaricata e decompressa dovra’ essere inserita in MAMP>HTDCOS e Rinominato. Istallazione • Localhost:8888/Magento, per iniziare il setup

• lanciato il Setup Magento , si procede alla verifica dei requisiti:

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• Poi al collegamento con il DB, qui va ricordato che in Mamp : • user e password= root. • Database name= nome del DB creato al punto precedente.

• Web Configuration: per definire sia il link che anche l’accesso al pannello amministrativo.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• Customizzazione: per la definizione del fuso orario, lingua e moneta di default. • Admin: nome e password dell’amministratore • Installazione: finita la configurazione si arriva alla installazione

• Success: terminata l’installazione

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Altre operazioni Con il comando CLI posizionarsi all’interno del Progetto di Magento Eseguire: • • • •

composer install php bin/magento setup:static-content:deploy php bin/magento cache:flush php bin/magento indexer:reindex

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Performance Per migliorare la velocita’ di Magento in localhost: • disabilitare cache • php.ini di Mamp: o max_execution_time = 18000 o memory_limit = 4000M Reindex Flat table Una altra azione per migliorare le performace è quella di precompilare le reazione tra i data base attraverso la flat table. Per questo : • Stores | Configuration • StoreFront • Modificare Flat Category e Flat Product

Ultimo reindirizzare Magento : php bin/magento indexer:reindex

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Traduzione Magento lingua Italiana Per tradurre in lingua Italiana, il front end di Magento, ho testato e utilizzato il progetto antoniocarboni. https://www.bitbull.it/blog/installare-la-traduzione-italiana-magento2/ Si deve solo effettuare il download dei file contenuti nel progetto https://github.com/antoniocarboni/magento2-traduzione-italiana I file contenuti in questa cartella scaricata da github, andranno inseriti nella directory: app/i18n/traduzione/it_It/. Questa directory non esiste in Magento quindi creata a partire dalla cartella app. Fatto questo, occorre effettuare il refresh : -della cache, se non disattivata (vedi poi) -della pagina del sito (anche qui attenzione alla cache del browser) Lanciato il comando localhost:8888/nomeSitoMagento (quello fornito nellâ&#x20AC;&#x2122; installazione), si vedranno le scritte non piuâ&#x20AC;&#x2122; in Inglese ma Italiano.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Principali settaggi di Magento Dopo l’installazione, il settaggio della lingua italiana, accedendo dal browser al link: localhost:8888/nomesito/adimin, si accede all’area di login che richiede: • user name • password Inserite le credenziali di ingresso si arriva al pannello di amministrazione di Magento.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Gerarchia di Magento Magento è costruito con una gerarchia, cosi’ da poter gestire al meglio piccoli e grandi E-commerce. Ecco come è strutturato Magento • Magento : Intera installazione, dove sono contenuti tutti i file • Sito: Domini e DataBase diversi. • Negozio: sono i prodotti, categorie contenuti in Magento • Vista: Visualizzazione del negozio, per esempio lingue diverse

La creazione di un web site multiview ad esempio multilingua avviene con le seguenti istruzioni • Stores | All Stores | Create Website • Create Stores https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• Create Store View Cliccato ultimo pulsante, Create Store View vanno poi create 3 viste, una alla volta : Inglese, Francese, Italiano (esempio). In alto apparira’ cosi’ il menu multilingua

Disabilita Cache

Andando su SYSTEM > CACHE MANAGEMENT : disabilitare la chache (disable >submit) e refresh.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Settaggi Magento: STORES > CONFIGURATION

Stores Configuration GENERAL • Country Options: Dove è possibile settare: ! Default countries/allow Countries : Per definire le nazioni dove avviene la vendita ! European Countries: aggiornare l’elenco • State Options: I paesi dove necessario indicare lo Stato • Local Options: per definire ! Time Zone, Fuso orario ! Locale ! Weight: unita’ di misura del peso= Kg. ! Primo giorno della settimana ! Giorni del Week End • Information : dove introdurre ! Nome , indirizzo, telefono etc ! VAT validation: Molto importante perché per legge la p. Iva va esposta nel sito.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Stores Configuration Web • • • • •

SEO- Search Engine Optimization: da impostare yes Base URL : per la vista del negozio Default pages: Home page, 404 page etc Cookies live time: settato a 3600 di default Cookies restriction mode: Da mettere a YES, in questo modo nelle pages , apparira’ l’informativa sui cookies obbligatoria per le normative Europee.

Currency Setup Definisce la moneta usata(€).

Store email adresses Per definire le diverse email per diverse funzioni: General Contact, Sales Repr, Customer support

Contact Per il modulo CONTACT e Email Options Andando nei prossimi capitoli, verranno poi affrontate le rimanenti parti della configurazione

Stores Configuration Sales In questo capitolo la possibilita’ di definire il layout di Invoice, caricando un logo (stores>configuration>sales>Invoice Packing and Slip Design). Check out : lo standard di Magento è: • Shipping information https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• Payments information Shipping setting e methods/ Mulitishipping Sotto il capitolo Invoice and Packing Shipping Design : come caricare il logo,

Stores Configuration Customer In questo capitolo viene descritto, come vengono inviate newsletter e gestiti i clienti. • Newsletter • Customer configuration • Whish list • Promotions • Persistent shopping cart: se yes, anche quando cookies sono scaduti, la shopping cart dell’utente è salvata.

Newsletter Sostituita da MailChimp

Customer configuration • Enable Automatic Assignment to Customer Group: YES • Default Group: Gruppo di defult, se non specificato. • Show VAT Number on Storefront: Yes, Clienti vedono VAT nello storefront. • Default … Email: specificare le email che si vuole usare • Generate Human-Friendly Customer ID: YES per generare humanfriendly customer ID.

Whish list Consente di salvare i prodotti per acquistarli poi, se Enabled: yes https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Promotion list Configurare le promozioni

Stores Configuration Catalog Inventory Opzioni per la gestione dell’inventario

SITE MAP SITE MAP aiuta Google Search nella ricerca del sito, esistono in Magento dei settaggi standard, la modifica pricipale è pero’: Enable submission to Robots: YES

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Configurazione Tasse

In Italia le tasse sono relative all’Iva pari al 22% (al 1/7/2017). Non tutti i prodotti hanno questa percentuale ad esempio alimentari, immobili e atri. Per questo la classe di tassazione IVA si applichera’ solo ai prodotti classe IVA22(classe creata con questa denominazione). Per la creazione

Stores > Tax Zones and Rates Add new Tax Rate In questa parte potra ‘essere definito una nuova tax rate : IVA calcolata al 22%. Questa percentuale andra’ indicata nel campo Rate percent. Stores>Tax Rules. In questo capitolo si definisce: • Tax Rate (definito nel punto precedente) • Customer tax Class • Product Tax Class Nota: Per default Magento ha gia’ creato due classi: Customer e Product Tax: Retail Customer & Taxable Goods. Magento da pero’ la possibilità di crearne di nuove, nelle stessa schermata, con il pulsante : Add New tax class. Alla fine del settaggio la configurazione andrà salvata!!

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Customer Group STORES>Customer Group Qui definire nuove Classi di Clienti. Ne esiste già alcune per default. La configurazione generale delle tasse si esegue poi in: STORES>Configuration>Sales>Tax. Qui si puo’ scegliere : • Classe per prodotto, spedizione • Metodo di calcolo delle tasse • Default calculation • Prezzo se incluso o escluso tasse • Come mostrare tasse su fatture, ordini • Tasse fisse per prodotto

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Legare Magento a MailChimp Per la creazione di newsletter, una delle possibilità è usare MailCHIMP. Qui una vasta illustrazione di queste funzionalità. https://www.liviobollini.it/tutormailmktg

Per utilizzare Mailchimp è necessario utilizzare da Magento Store l’estensione: MageMonkey. Ottenere estensione Magento Connect

L’estensione di Magento, MageMonkey che consente il Collegamento a MailChimp, è scaricabile in Magento Connect.(free) https://www.magentocommerce.com/magento-connect/

Una volta ottenuto MageMonkey, per installarlo sul sito di Magento, si deve ottenere Access Keys utente. Access Key utente e’ disponibile , andando in Magento connect alla sezione : • Market Place • My Access Keys, Magento2

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Installare lâ&#x20AC;&#x2122;estensione su sito Magento.

Comperata lâ&#x20AC;&#x2122;estensione, ottenute le API Key, queste ultime andranno copiate nello sito di Magento, per poi installare le estensioni appena acquistate.

Cliccando su System > WebSetupWizard, si arriva a

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Cliccando su System Configuration, si apre la maschera dove copiare le chiavi di Access Keys utente ottenute in Magento Connect, precedentemente Per l’installazione di MageMonkey , occorre poi scegliere Component Manager, poi: • Sincronizzare il sito: SYNC • Install e successivamante sotto la colonna New Purchase: selezionare magento2-magemonkey. Seguire poi le istruzioni per installazione: • Verifica compatibilità • Back up • Installazione Fino ad ottenere SUCCESS. Configurare MageMonkey • Per prima cosa occorre Creare un account in MailChimp : https://www.liviobollini.it/tutorMailchimpAccount

• Reperire l’apiKey di Mailchimp, che si trova in menu >account > extras https://www.liviobollini.it/tutorMailchimpForm

• Andare in Stores>Configuration>MageMonkey, inserire sia Apikey che il nome della lista da usare. https://marketplace.magento.com/ebizmarts-magento2magemonkey.html Per verificare che tutto sia funzionante: o Nel footer inserire un’email di iscrizione alla newsletter o Controllare che il nuovo utente esiste nella lista di Mailchimp https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Risoluzione di problemi

Se doveste avere dei problemi per l ’ installazione tipo funzionamento di Cron Scripts. Le istruzioni da seguire per MAMP, sono descritte di seguito. Aprire il terminale CLI e digitare : • sudo crontab -u root -e • “i” per Insert

Nel file che si apre digitare: */1* * * * /Applications/MAMP/bin/php/php7.0.10/bin/php -c /Applications/MAMP/conf/php7.0.10/php.ini /Applications/MAMP/htdocs/magentodev/bin/magento cron:run >> /Applications/MAMP/htdocs/magentodev/var/log/setup.cron.log&

*/1 * * * * /Applications/MAMP/bin/php/php7.0.10/bin/php –c /Applications/MAMP/conf/php7.0.10/php.ini /Applications/MAMP/htdocs/magentodev/update/cron.php >> /Applications/MAMP/htdocs/magentodev/var/log/setup.cron.log& */1 * * * * /Applications/MAMP/bin/php/php7.0.10/bin/php -c /Applications/MAMP/conf/php7.0.10/php.ini /Applications/MAMP/htdocs/magentodev/bin/magento setup:cron:run>> /Applications/MAMP/htdocs/magentodev/var/log/setup.cron.log&

Dove: • 7.0.10 è la versione di php, da cambiare con quella in uso • /Applications/MAMP/htdocs/magentodev la directory dove è Magento , da cambiare • /Applications/MAMP/conf/php7.0.10/php.ini dove è il file php.ini, da cambiare se necessario Alla fine digitare: • esc per uscire • ZZ(maiuscolo) per aggiornare Ultimo andare nel file php.ini e impostare: • memory_limit = 2G (almeno) https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Metodi di spedizione

I metodi di spedizione si trovano in Stores>Sales Esistono le seguenti sezioni: • Shipping Settings: serve per definire l’origine della spedizione • Multishipping adresses : nel caso di spedizioni a piu’ indirizzi • Shipping methods: di cui discuteremo in dettaglio.

Flat rate

Con questo metodo il costo di spedizione ha un unico valore, indipendentemente da peso o destinazione. Puo’ essere definito per ordine o per item, un costo fisso oppure in percentuale. Free shipping

Nel caso il costo di spedizione sia gratuito . Puo’ per esempio essere utile in caso di promozione, oppure nel caso di ordini maggiori di un certo valore.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Table Rates

Premesso che collegarsi con le tariffe di uno spedizioniere offre maggiori informazioni, table rates, è utile quando si vuole definire il costo di spedizione, in base a piu’ parametri. I passi per configurare table rates, sono: • Configurare Table Rate metodo • Preview di Table Rate • Import dei dati della tabella Configurare Table Rate metodo La schermata di table rate, comprende, in particolare : • Enabled: yes • Title/method name • Condition : price vs destination e altre scelte • Include virtual product : no • Calculate Handling fee: fixed o perc se si vuole caricare un costo addizionale per la gestione • Handling fee: valore fisso/percentuale del costo gestione • Applicable Countries • Ship to specific Countries Preview di Table Rate Nel lato in alto a sinistra, adesso impostato in defaul configuration, scegliere Main WEB site (dopo aver salvato), comparira’ il pulsante EXPORT. Cliccando si otterra’ il file CSV per la tabella. Questo file andra’ completato e poi salvato ad esempio su desktop https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Import dei dati della tabella Adesso sempre in alto , scegliere Store View Importare il file CSV, salvato e completato

Per il test occorrera’, testare i pagamenti, con le differenti condizioni

Metodi di pagamento

STORES>CONFIGURATION>SALES>PAYMENT METHODS Metodi di pagamento esistenti

• PayPal • Braintree • Altri metodi: o Assegni o vaglia o Bonifico Bancario o Contrassegno o Zero Subtotal Checkout: Quando ad esempio a causa di sconti il subtotal è uguale a zero, oppuer free of charge. o Purchaise order: usato nel caso un Cliente emetta ordine di acquisto. o Authorize.net: usato in Usa e Canada

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Configurare Paypal come metodo di pagamento

Credenziali PayPal Per prima cosa occorrera’ avere un account Paypal di tipo business, con email conferamata, in modo da poter accettare pagamenti . Con questo accedere al sito di PayPal https://www.paypal.com/ Successivamente, tornati al sito di Magento, si puo’ accedere al pulsante “Configure”.

Accedendo, dopo aver cliccato su Configure si deve decidere se lavorare con : -Sandbox credential: la modalita’ di test di Paypal -Get credential: direttamente senza test Per entrambe le modalita’ esiste un pulsante, attraverso cui ottenere le credenziali “Credentials” direttamente da PayPal. Con questa procedura, configurando API signature, si otterrano le altre informazioni.(username, password, signaure). Ottenute le credenziali, Magento richiede altri settaggi.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Basic setting Paypal Magento • Titolo: titolo del metodo di pagamento • Sort order: in che ordine vengono presentati i metodi di pagamento nel sito (0) • Payment action : se i pagamenti sono accettati dopo Autorizzazione, oppure se procedere all’addebito subito (Sale) • Display on Product details: scegliendo yes (suggerito), il metodo di pagamento sarà visibile in ogni pagina di dettaglio prodotto Advanced setting PayPal • Display on Shopping Cart: Yes suggerito, per mostre il metodo nella shooping cart. (YES) • Payment Applicable From: Nazioni dove applicabile • Debug mode (NO) • Enable SSL verification: Protezione SSL (YES) • Transfer Cart Line Items: Se si, verranno mostrati tutti gli item acquistati come dettagli della trnsazione PayPal (YES) • Transfer Shipping Options: trasferisce le opzioni di spedizione da Magento 2 alla finestra PayPal (NO)

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Altri metodi di pagamento Assegni o Vaglia

Questo metodo è abilitato per default • New order status: “Pending” , in attesa che pervenga il pagamento • Payment from applicable Countries: Nazioni abilitate • Make check payable to: il nome della persona a cui intestare l’assegno • Send to : a chi spedire l’assegno • Total Min/Max: valore min o max dell’ordine Bonifico Bancario

Oltre ai campi precedenti, esiste il campo • Instruction: dove inserire i dati bancari di chi vende e che chi

compra dovra’ utilizzare per effettuare il pagamento.

Creare un Coupon in Magento

Marketing>Cart Price Rules>add new rules I campi da riempire, sono: • Rule Information • Conditions • Actions https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Rule Information

I principali campi da riempire in "Rules information", sono : • Name, Status, Customer Group, Coupon, from..to... Un campo importante è anche il Coupon Code , che puo’ essere inserito a mano, ma anche autogenerato Conditions Scegliere la condizione, IF ALL these CONDITIONS are TRUE Per esempio per scegliere una categoria, inserita nello store. Actions Apply: as a percentage e altre opzioni Discount amount Discard subsequent rules

Gestione ordini in Magento

Creare nuovo ordine Per creare un nuovo ordine i passi da eseguire, sono quelli di seguito SALES>ORDERS>CREATE NEW ORDER Eseguita questa scelta, si accede alla sezione successiva, che richiede: CREATE NEW CUSTOMER. Per prima cosa andrà selezionato un Cliente. Se il Cliente non esiste, andra’ creato, attraverso: https://www.liviobollini.it

E-commerce : Strategia e Strumenti

La creazione di un nuovo Cliente richiede: • Informazioni anagrafiche (incluso P.IVA se disponibile) • Email • Payment e shipping Method ADD SELECTED PRODUCT Con questa istruzione, viene specificato il prodotto, oggetto dell’ordine. SUBMIT ORDER Cliccando poi SUBMIT ORDER : L’ ordine verra’ creato Fattura In questa sezione vengono gestite le fatture emesse : SALES>INVOICES. In precedenza il settaggio di queste fatture, il logo, è stato fatto attraverso, STORES>CONFIGURATION>SALES. Per emettere una fattura, scegliere nel menu dell’ordine selezionato(SALES>ORDERS): Invoice

Poi submit invoice Credit Memo Puo’ succedere che un Cliente decida di ritornare un articolo, Magento puo’ aiutare, creando un Credit Memo. Condizione pero’ per il Credit Memo è che la fattura per ordine sia stata emessa. Per prima cosa andra’ selezionato l’ordine oggetto del ritorno (SALES>ORDER). Poi nel menu’ a sinistra scegliere Credit Memo https://www.liviobollini.it

E-commerce : Strategia e Strumenti

A questo punto l’ordine va tornato in stock, e specificato la quantità da rimborsare. Inoltre • Refund shipping: il valore del costo delle spedizioni da rimborsare • Adjustement refund: un valore addizionale del rimborso • Adjustement fee: un valore che non verra’ rimborsato • Append comments • Email REFUND OFFLINE. In SALES>CREDIT memo sara’ visibile l’elenco dei credit memo.

Billing Agreement Un settaggio dei pagamenti che consente un rapido pagamento. Per usarlo deve essere: • Configurato in STORES>CONFIGURATION>PAYABLE METOD • Creato Cliente

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

ECOMMERCE : Aspetto estetico In questa parte, verrà discusso: • Modificare un tema preinstallato: LUMA • Installare un tema esterno, acquistato Un sito dedicato all’acquisto di materiale fotografico (ad esempio). Se dobbiamo creare un sito Ecommerce, avremo bisogno di tutti i contenuti, gia’ discussi nella sezione Home page . In particolare : - logo e un titolo che spiega la attività - menu’ di navigazione -home page dove mettere ad esempio gli ultimi prodotti -pagine che mostrano le diverse categorie prodotti -contattaci Modificare Content

Content > Configuration Global > Edit La schermata che si apre richiede la scelta del tema

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Successivamente una serie di sezioni, dove: Html head Consente di inserire favicon, titolo, descrizione, key word Header • Modificare la foto di logo • Messaggio di benvenuto Footer • Inserire codice html • Copyright Pagination • Regole per piu’ pagine – pagination Immagine prodotto filigrana Serve per proteggere le immagini, con una filigrana • Caricare l’immagine della filigrana • Opacità e dimensioni • Posizionamento Email transazionali • Logo • template Menu’ e Categorie La creazione di un menù richiede la creazione di una o più categorie. Ad esempio supponiamo di volere creare un menu con le pagine: • Reflex • Obiettivi • Accessori • Ebook https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• Abbigliamento • Chi sono • Contatti Per ogni voce di Menu’ andra’ creata: Una sottocategoria (subcategory ) di default category.

Products > Category Questo darà la possibilità di creare una categoria/sottocategoria, indicando: ! Nome ! Immagine ! Descrizione ! Add CMS block ! Layout Le varie sezioni della categoria, sono: Content Dove è possibile inserire immagine, descrizione, key word Display Se mostrare prodotti e/o blocchi statici SEO: Search Engine Optimization Dove definire i meta tag

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Products in Category Prodotti nelle categorie Design Tema che viene usato La categoria verrà mostrata nel menu’ se si sceglie: Include in Menu.

Prodotto

Products >Catalog Creata la categoria andranno creati i prodotti che fanno parte della stessa. Si possono scegliere le seguenti tipologie: • Prodotto semplice • Configurabile • Virtuale / download Prodotto semplice Dal bottone Add Products, scegliere dal menu a tendina: SIMPLE PRODUCTS https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Possono fare parte di questa famiglia ad esempio: • Reflex di varie marche, collegate alla categoria reflex • Obiettivi di varie dimensioni, categoria obiettivi • Accessori (zaino, cavalletto, etc) categoria accessori Per ogni prodotto andra’ compilato il form con le informazioni richieste. Informazioni Generali

• • • • •

Nome SKU : uguale al nome per default Prezzo, incluso eventuale promozione(advanced price) Classe tasse (iva 22%) Quantita’ e Stock

Content

• Descrizione completa • Descrizione breve Immagine

• Immagini del prodotto S.E.O

• • • •

url title key word description

UP and Cross Selling

• Related product: Prodotti collegati • UP selling un prodotto simile ma di qualita’ maggiore • Cross selling : un prodotto aggiunto (a una reflex ad esempio un cavalletto) https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Design

• Opzioni di layout

Prodotto configurabile Un prodotto configurabile è simile ad un prodotto singolo, con una lista dropdown di opzioni per ogni variante. In sostanza, un prodotto configurabile, è un sistema che consente di raggruppare più oggetti uguali, ma con caratteristiche differenti. Esempio di un prodotto configurabile, puo’ essere un capo di abbigliamento con diverse taglie, una maglietta con colori diversi e taglie diverse. Oltre alle configurazioni del prodotto semplice, il prodotto configurabile ha un campo in piu’: Create Configurations. Al click si apre la seguente maschera:

La creazione di un prodotto configurabile, richiede la esecuzione di 4 step. Step 1 :attribute

Qui andranno specificati gli attributi del prodotto configurabile, scegliento Add Attribute

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Create new attribute

Un attributo sostanzialmente è quell’elemento che definisce le caratteristiche di un prodotto. ADD ATTRIBUTE>Create New Attribute

I campi base da compilare sono: • Default label: identificativo, creato attraverso STORES>ATTRIBUTE SET > Add Attribute Set Da creare per ogni attributo • Catalog Input type for store Owner: Come scegliere l’ attributo. Ad esempio, se colore dropdown. • Store front properties Manage Options(Value of your attributes) • Definisce le varie opzioni dell’attributo. Ad esempio se l’attributo è “taglia”, Options rappresenta valori delle taglie.(40,42, etc..). Ogni valore dell’opzione, rappresenta le diverse scelte del prodotto

Advanced • Attribute Code: codice attributo, senza spazi e non oltre 30 caratteri • Scope: store view • Unique Value: No • Input validation: letters e/o numbers • Add to Column: yes • Use in filter options: yes https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Titoli • Titoli della label Store Front Properties • Use in search : No • Comparable in store Front : No • Use in layered navigation : No • Use in search result: No • Used in Prome Rule: No • Allow html tags: yes • Visible on catalog Pages: no • Used in Product Listing: No • Used for Sorting in Product Listing: No

Per default Magento crea due attributi di default: • Colore • Produttore Step 2 : scegliere i valori delle opzioni

• Cioe’ per esempio per le taglie, i valori disponibili Step 3: Immagini e quantita’

• Qui scegliere se unica immagine, prezzo per ogni valore delle opzioni. Step 4: Sommario

Scegliendo piu’ attributi, possono essere fatte combinazioni

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Prodotto scaricabile Per crearlo va scelto ADD PRODUCT>DOWNLODABLE In aggiunta ai campi di SIMPLE PRODUCT, esiste il campo Link Mettere il titolo e se il link puo’ essere acquistato separatamente:

Cliccare Add New Link e compilare i campi.

Da notare : • nel campo File, attraverso BROWSE FILE, si puo’ allegare il file per il download. Al termine della configurazione SAVE e il prodotto è creato.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

CONTENT:

Strumenti Per il design delle varie pagine Magento offre una serie di tools. Blocks I blocchi sono dei template che una volta riempiti di contenuto o tramite il codice html, possono essere visualizzati nella pagina. Si creano attraverso Content>blocks>add new Block

La parte da utilizzare è quella dell’editor o HTML. Variabili Le variabili, sono pezzi mobili di testo o codice HTML da aggiungere alle email transazionali, a blocchi statici e a pagine del CMS. Questa funzione può essere molto utile quando vuoi personalizzare Magento a tuo piacimento. Su editor , si puo’ cliccare su :

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Esistono una serie predefinita di variabili da inserire, oppure si possono creare. Lista delle variabili predefinite.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Widgets

Sono estensioni di Magento, con un set di opzioni che possono essere aggiunte alle pagine o ai blocchi. Ancora sono selezionabili dall’editor a fianco delle variabili. Ecco l’elenco dei widgets predefiniti. • CMS Page Link: link a una pagina • CMS Static Block: richiama un blocco • CMS Category Link: Elenco delle categorie • CMS New Product List : nuovi prodotti • Orders e Returns: Ordini e resi • Recently Compared products: Comparazione prodotti • Recently Viewed Products: Prodotti visti Pagine In questa sezione, sono contenute le pagine create di default da Magento, a cui possono esserne aggiunte altre: • CONTENT>PAGES>Add New page

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Per esempio Home Page Select>EDIT. In questa pagina potremmo ad esempio mettere il

widget CMS New Product List. Oltre ad una immagine . L’immagine puo’ essere inserita nascondendo l’editor, comaprira’ un bottone : insert immage

Risoluzione dei Problemi Durante l’utilizzo dell’editor, puo’ capitare che caricata la pagina, selezionata l’area content, cliccandu editor, quest’ultimo non funzioni! Una ricerca su forum di Magento forum, suggerisce che questo dipenda da js Bundling. Javascript bundling e’ una tecnica che ragguppa i files, per ridurre

le richieste http. La sua configurazione si esegue in STORES>Configuration>Advanced>Developer

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Cliccando su Yes /No in Chrome ho ottenuto la soluzione e Editor ha ripreso a funzionare.

E-commerce Creare un tema Struttura

La creazione di un tema richiede la creazione di una struttura come :

Questa struttura deve essere aggiunta a: app : design-frontend : <Magento folder> : <tema>

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

I file che compongono il tema sono: • registration.php: registra il nuovo tema in Magento <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/tema/vista', __DIR__ );

• theme.php: definisce il nome del tema e le dipendenze. Le dipendenze in particolare, attraverso : <parent>Magento/blank</parent> Con questa istruzione, il nuovo tema, eredita le proprieta’ dal tema : blank che insieme a Luma è uno dei due temi di default in Magento. <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/ etc/theme.xsd"> <title>tema</title> <parent>Magento/blank</parent>  </theme>

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

â&#x20AC;˘ composer.json: definisce le caratteristiche del tema { "name": "directory/nomevista", "description": "Magento theme", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-luma": "~100.0", "magento/framework": "~100.0" }, "type": "magento2-theme", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } }

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• default.php: serve per definire il logo iniziale del tema :logo.png L’immagine che sarà il logo del tema, visibile nel top a sinistra del tema. E’ posto nella cartella : Magento_Theme>web>images <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/La yout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">Magento_Theme/images/logo.png</argument> <argument name="logo_img_width" xsi:type="number">90</argument> <argument name="logo_img_height" xsi:type="number">120</argument> </arguments> </referenceBlock> </body> </page>

• default_head_blocks: collega i file nella sezione head : • Bootstrap.css • Style.css • Bootstrap.js

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Less metodi di stile

Per la gestione degli stili Magento utilizza Less Breve introduzione a Less Less è un pre-processore che estende il linguaggio CSS. Less usa : • Variabili: cioe’ parametri per definire il codice CSS. Esempio: @color: white; div {color: @color} • Mixin: Mixin sono un modo per includere ("mescolare") un gruppo di proprietà da una regola impostata in un altro set di regole. Esempio: .color {color: white}; div{.color } • Operator: Operatori aritmetici e logici. Esempio: @fontsize:12px; div {fontsize: @fontsize*2} https://www.liviobollini.it

E-commerce : Strategia e Strumenti

• Nesting: possibilita’ di organizzare selettori e direttive come hover. Esempio: @color: black; div { color: white; &: hover{ color: @color ;} Compilazione Less in Magento2 Per compilare Less in Magento occorre: • STORES>Configuration>Advanced>Developer • Store view selezionare Default Config • Front-end development workflow selezionare: o Server Side , oppure o Client side File di stile del tema Magento 2 _Style.less E’ il file attraverso il quale viene importata la libreria dei temi preimpostati in Magento : Blank e Luma. @import 'source/lib/_lib.less'; @import 'source/_sources.less'; @import 'source/_components.less'; _theme.less Il file _theme.less contiene le modifiche di stile che si desidera apportare. Sono scritte in formato.less, Magento le trasformerà formato.css. Per esempio cambiare il colore dei link etc.. _module.less Il contenuto di questo file, per prima cosa è copiato dall’equivalente nel tema luma. Quest’ultimo file si trova in: https://www.liviobollini.it

E-commerce : Strategia e Strumenti

<magento dir>/vendor/magento/theme-frontendluma/Magento_Theme/web/css/source Dopo aver copiato il file, si possono fare delle modifiche ai componenti presenti nel file. Ad esempio a logo, product, footer etc…

Bootstrap Responsive Nella creazione della pagina, puo’ essere utile usare bootstrap, oppure usare il file style.css in alternativa a Less. In questo caso occorre: • scaricare i file bootstrap.js e bootstrap.css (min in produzione) • inserirli nella cartella web>css e web>js • creare un file default_head_blocks.xml Ecco il contenuto di default_head_blocks.xml <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/La yout/etc/page_configuration.xsd"> <head> <css src="css/bootstrap.css" order="99"></css> <css src="css/style.css" order="100"/> <script src="js/bootstrap.js"></script> </head> </page>

Come gia’ detto, questi file sono contentuti in <Magento folder> : <tema> web https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Attivazione del tema Magento setup Fatti questi passi, il tema è pronto per la attivazione, andando in CONTENT>Configuration. Scegliere EDIT e nella finestra che si presenta selezionare il tema creato. Creazione contenuto home page & menu Creati questi files, il tema puo’ essere attivato: • Creando sub category della cartella default category. Questo consentira’ la creazione del menu. • Creando un block che verra’ inserito nella home page. Tale blocco conterra’: • Codice html, che si desidera • Immagine, inserita attraverso editor • Widget, ad esempio Product list Tutto come in precedenza descritto.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Esempio home page con Bootstrap <div class="container "> <div class="row " style="background-image:url('../images/bck.jpg'); background-size: 100% 500px; background-repeat: no-repeat; z-index: 3; min-height:380px; height:auto; padding: 10%; "> <div class="col-md-6" ></div> <div class="col-md-6 col-md-offset-6 col-xs-offset-4" style="backgroundcolor:white;padding-left:20%;padding-right: 20%;padding-top: 25px; z-index: 4;height: 20 0px;width:50%;min-width: 220px;"> <h3>Nuovi Prodotti</h3> <a href="{{store url=" "}}technology.html"> <button class="btn btn-default btn-lg">Compera</button> </a> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <h3>Recensione</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa molestiae illum commodi ipsa, inventore consequatur? Natus minus minima totam expedita. </div> <div class="col-md-6"><h3>Critica</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa molestiae illum commodi ipsa, inventore consequatur? Natus minus minima totam expedita. </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-4"> <div class="content-heading"> <h2 >Nuovi prodotti</h2> <h4 >Ecco la lista!!</h4> </div> </div> </div></div> https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Pagina ContactUs Per creare una pagina di contatti nel menu, basteraâ&#x20AC;&#x2122; creare un block in cui inserire: {{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}

Successivamente collegarlo al menu, attraverso la creazione di una subcategory di Default , nella sezione PRODUCTS

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Risoluzione dei problemi Non aggiorno pagina prodotto

Lavorando con temi aggiunti puo’ capitare di non riuscire a salvare l’ immagine oppure non salvare il prodotto. In questo caso occorre andare al DB e cercare la tabella Theme. Una volta trovata cancellare le tabelle al suo interno. Se invece il sistema segnala la necessita’ di “reindex dei file” allora occorre andare al terminale e posizionandoci nella cartella di magento, digitare il comando CLI : php bin/magento indexer:reindex.

Non visualizzo home page

“There has been an error processing your request” Se compare questo errore, quando con il browser si accede alla home page, vuole dire che non è stato correttamente selezionato il tema in CONTENT>Configuration – edit Layout

Se nella visualizzazione della Home page, compare un layout non corretto, questo è dovuto alla impostazione del layout nella home page. Allora bastera’ mettere nell’home page alla voce DESIGN : 1 column. Inoltre è preferibile non mettere nel static block oltre al codice anche il widget (product link) . Meglio separarli : codice nel blocco, widget nella home page.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Inserire Blocchi statici Per inserire blocchi statici ad esempio nella pagina di prodotto, questi i passi Creare layout 2 colonne

Nella pagina di prodotto (ad esempio) alla voce Design, scegliere 2 column left bar

Creare un Block: • • • • •

Content>Block Add new Block Title: nome blocco Scope of Display: All stores view Content: insert title e images

Creare Widget: • • • • • • •

Content >widget Type: CMS static Block Design Package: scegliere tema Layout update: Add Layout update Display On: Specified page Page: Catalog Product view Select block: (quello precedentemente creato)

Ecco il risultato:

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Templates A volte i soli blocchi non bastano, serve un div in piuâ&#x20AC;&#x2122;. Per questo si possono creare template. Ad esempio se si vuole cambiare la frase di copyright, questi i passi. Creare una cartella nel tema Magento_theme | templates | html | copyright.phtml File copyright.phtml Nel file copyright.phtml, inserire : <small class="copyright"> <span>Copyright Nome Cognome , tutti i diritti riservati</span> </small> Verificare poi la home page. Nel caso il sito non cambi, ricordarsi di pulire la cache.

https://www.liviobollini.it

E-commerce : Strategia e Strumenti

Pagine catalogo/prodotto Per aggiungere dello stile alle pagine di prodotto, occorrera’ creare una cartella: Magento_Catalog. In questa directory, adra’ copiata la directory : vendor/magento/module_catalog/view/frontend/templates Successivamente, si potranno poi apportare modifiche ad esempio al file addto.phtml nella directory : Magento_Catalog/templates/product/view/addto.phtml La denominazione phtml significa che il file è pronto per utilizzare sia html che php.

Static Deploy Andranno cancellate le directory: • var/view_preprocessed/ • pub/static/frontend/<MagentoTema>/<vista>/ Poi a terminale l’istruzione CLI : • php bin/magento setup:static-content:deploy

https://www.liviobollini.it