GUIDA DYLOG E-COMMERCE powered by MAGENTO 1. Intestare il sito La prima operazione da compiere sul nostro sito E-Commerce consiste nell intestazione. Il sito viene infatti rilasciato comprensivo di una serie di dati di prova, i quali devono essere modificati con i dati del cliente. Vedremo tra poco che il prodotto ci aiuta non poco in questa operazione. Ma andiamo con ordine. 1.1 Accesso al backend Per prima cosa, occorre accedere al backend, utilizzando le credenziali Admin forniteci. Digitiamo all intenro della barra degli indirizzi il nome del nostro sito, seguito da /admin. Es. se il nostro sito E-Commerce si chiama http://mariorossi.lineaweb.dylog.it, digitiamo all interno della barra degli indirizzi http://mariorossi.lineaweb.dylog.it/admin. Ci viene proposta la schermata di login: Fig.1 Digitiamo il nome utente e la password comunicateci da Ufficio Produzione quando ci è stato rilasciato il sito e clicchiamo sul pulsante Accedi.
1.2 Modificare le informazioni negozio Dopo aver effettuato l accesso, ci viene proposta la nostra Dashboard. All interno della dashboard troviamo il collegamento a tutte le funzioni del backend. Fig.3 In particolare, all interno del menu CMS troviamo una serie di funzioni che ci aiutano nello startup del nostro sito E-Commerce. Abbiamo detto che per prima cosa vogliamo intestare il nostro sito, quindi portiamoci quindi sul menu CMS e selezioniamo la sottovoce Informazioni Negozio. Fig.4 Ci viene proposta una schermata di inserimento informazioni. Compiliamo tutti i campi e clicchiamo il pulsante Salva.
Fig.5 Bene, abbiamo compilato le informazioni negozio. Ora il nostro sito E- Commerce è intestato al nostro cliente. Ma cosa significa questo? Per come è stato configurato il nuovo E-Commerce Dylog, le informazioni inserite all interno delle Informazioni Negozio vengono proposte sul sito, all interno del footer, sono inserite in tutte le e-mail inviate dal negozio (ordini, pagamenti, spedizioni) e compongono anche le pagine! Vediamo il tutto assieme: a) Informazioni inserite nel footer: Fig. 6 Nome negozio, numero di telefono, partita IVA, Cap. Sociale, indirizzo sono stati automaticamente inseriti all interno del footer del sito E-Commerce.
*N.B.: è obbligatorio inserire P.IVA e Cap. Sociale all ultimo bilancio sul proprio sito E-Commerce. b) Info inserite all interno dell header: Fig. 7 Un altro default che abbiamo previsto è l inserimento del numero di telefono, unito ad un messaggio Contattaci al numero all interno dell header (parte alta) del sito E-Commerce. Il numero di telefono esposto è quello inserito all interno delle informazioni negozio. c) Intestazione e-mail inviate dall E-Commerce Tutte le e-mail inviate dal nostro e-commerce conterranno, in automatico e in maniera dinamica, nome negozio, la e-mail negozio e il numero di telefono negozio. Vediamo alcuni esempi: Mail di conferma ordine corpo testo con riferimenti negozio Nome Negozio E-mail Negozio Numero di telefono negozio Fig.8
Mail di conferma ordine ringraziamento per l acquisto con nome negozio Fig.9 Come si può notare dagli esempi proposti, su ogni e-mail inviata dal negozio viene anche inserito il logo del negozio, sempre in maniera automatica (v. punto 2.1 Personalizzazioni grafiche) Naturalmente, è possibile modificare i template e-mail in caso il default non fosse sufficiente ad esaudire le esigenze del cliente (v. 5.1: modificare i template e-mail) 2. Personalizzazioni grafiche di base 2.1 Inserire il logo e la favicon Il primo step per procedere alle personalizzazioni grafiche consiste nell inserire il logo del cliente. Per farlo, portiamoci all interno della sezione CMS, quindi clicchiamo sulla sottovoce Logo. Fig. 10 Scegliamo il logo e la favicon sfogliando il nostro Hard Disk, qunidi carichiamoli.
Cos è la favicon? La favicon è l icona che appare a fianco al titolo del sito nella tab del browser. Es. Fig. 11 N.B: il logo e la favicon vengono ridimensionate per adattarsi allo spazio loro dedicato sul sito. In caso le immagini caricate siano troppo piccole, queste non vengono stretchate, ma centrate all interno delle spazio a loro dedicato. Come visto in 1.2 c), inoltre, il logo caricato verrà inserito su tutte le e-mail inviate dal negozio. 2.2 Inserire le immagini all interno dello slider Homepage Inserito il logo, passiamo alle immagini dello slider. Lo slider è l insieme di immagini a scorrimento inserite in homepage. E possibile inserire fino a 5 immagini a scorrimento all interno dello slider. Esattamente come per il logo, anche per lo slider è previsto un autoresize delle immagini, in modo che non dobbiamo preoccuparci troppo delle dimensioni delle immagini caricate. Per inserire le immagini all interno dello slider, portiamoci sul menu CMS, quindi clicchiamo sulla sottovoce Slider Homepage. Fig. 12
Per ogni immagini, è possibile inserire un link. Carichiamo le immagini sfogliando il nostro Hard Disk e quindi clicchiamo su Salva. Nel caso in cui il cliente voglia inserire solo alcune immagini slider e non tutte e 5 in homepage, sarà sufficiente caricare solo le immagini desiderate ed eliminare le altre immagini, spuntando la casella elimina immagine e quindi cliccando su Salva. Nel caso in cui il cliente non desideri inserire alcuna immagine a scorrimento in homepage, sarà sufficiente spuntare la succitata casella elimina immagine su tutte le immagini, quindi cliccare su Salva. Il template si adatterà rimuovendo il blocco slider. Fig. 13
2.3 Inserire le immagini dei banner in homepage Subito sotto lo slider, in homepage sono presenti 3 banner. Vediamo come inserire le nostre immagini, tenendo sempre presente che esattamente come per lo slider e per il logo, è presente un sistema di autoridmensionamento delle immaigini. Portiamoci su CMS, quindi selezioniamo la sottove Banner Homepage Fig. 14 Carichiamo le immagini sfogliando il nostro HDD, inseriamo il link a cui devono puntare (se desideriamo che le immagini puntino a qualche indirizzo) e clicchiamo su Salva. Ecco il risultato finale: Nel caso in cui il cliente voglia inserire solo uno o due banner in homepage e non tutti e tre, sarà sufficiente caricare solo i banner desiderati ed eliminare le altre immagini, spuntando la casella elimina immagine e quindi cliccando su Salva. I banner inseriti verranno disposti sempre da sinistra verso destra. Nel caso in cui il cliente non desideri inserire alcun banner in homepage, sarà sufficiente spuntare la succitata casella elimina immagine su tutte le immagini, quindi cliccare su Salva. Il template si adatterà rimuovendo il blocco banner.
Fig. 15 2.3 Inserire i prodotti visualizzati in Homepage In un E-Commerce la cosa più importante sono i prodotti. Occorre prestare attenzione alla disposizione dei prodotti e a come vengono mostrati. L Homepage è la pagina principale del nostro sito E-Commerce e il punto di accesso della gran parte dei nostri visitatori. E bene quindi mostrare una serie di prodotti civetta sulla homepage, in modo da invogliare l utente a proseguire nella navigazione del sito. Abbiamo creato un menu semplificato anche per questa esigenza. Vediamo assieme come funziona: Portiamoci sulla voce CMS, quindi selezioniamo la sottovoce Prodotti Homepage.
Ci apparirà la seguente schermata: Da qui possiamo scegliere quali categoria di prodotti esporre in homepage. Fig. 14 E possibile creare categorie apposite, non inserite nel menu di navigazione, come ad es. Offerte e agganciare i prodotti interessati anche a questa categoria (v. 3.1 Caricare le categorie). E possibile inserire fino a 10 categorie di prodotti in Homepage. Ogni categoria diverrà una tab posta nella parte bassa del sito ed esporrà in Homepage i primi 10 articoli, ordinati per nome. E possibile modificare questa impostazioni (ordinamento e numero di prodotti esposti in homepage) dal menu Configurazione (v. 4.1 le configurazioni).
Un esempio di prodotti esposti in homepage: Fig. 15 Nel caso in cui il cliente non desideri avere alcun prodotto esposto in homepage, sarà sufficiente deselezionare le categorie dalle rispettive combobox, i quali risulteranno tutti bianchi. I prodotti in homepage, così facendo, non saranno più visualizzati.
Fig. 16 2.4 La modifica dei colori: Inseriti logo, favicon, immagini slider, immagini banner, procediamo alla modifica dei colori del sito. Ogni E-Commerce viene rilasciato con un set di colori preimpostati, in base al template scelto. E però possibile modificarli per incontrare le esigenze del nostro cliente. Come funzionano i colori sull E-Commerce Magento? E possibile gestire due colori (primario e secondario) e il contrasto. Tutti i colori del sito vengono declinati automaticamente a partire dai due colori indicati, andando a schiarirli o scurirli per colorare i bottoni, le tab delle categorie, i titoli, i link, ecc.
Ad esempio, supponiamo di scegliere come colore primario una tonalità di verde scuro e colore secondario una tonalità di grigio chiaro. Questo è il risultato finale: Fig. 16 Vediamo come impostare i colori: portiamoci sulla voce Sistema, quindi selezioniamo la sottovoce Configurazione. Si aprirà la seguente schermata: Fig. 17
Quindi selezionate dal menu a sinistra la voce Theme. Vi si aprirà la seguente schermata: Fig. 18 Selezioniamo i colori che desideriamo inserire come primario e secondario e il contrasto da applicare, quindi clicchiamo su Salva. Il risultato è immediatamente visibile sul sito. Aggiustiamo colori e contrasto secondo le nostre preferenze fino a raggiungere il risultato desiderato. 3. Gestione pagine statiche 3.1 Modifica pagine Ogni e-commerce viene rilasciato con 6 pagine statiche già inserite: Chi Siamo, Dove Siamo, Spedizioni, Condizioni di vendita, Pagamenti, Privacy Policy. Vi accediamo, in front-end, dal footer del sito. Qui, infatti, troviamo un menu contenente le 6 pagine succitate.
Fig. 19 Le pagine sono riempite con testi sample, costruiti per essere utilizzabili in mancanza di ulteriori indicazioni più specifiche da parte del cliente. Il testo in esse inserito è costruito utilizzando una serie di variabili globali: Nome Negozio, Indirizzo Negozio, E-mail negozio, Città. Cosa significa questo? Significa che all interno del testo verranno inseriti automaticamente i dati dell E-Commerce del cliente, che abbiamo inserito all interno delle Informazioni Negozio (v. 1.2 modificare le informazioni negozio ). Vediamo un esempio, apriamo la pagina Chi Siamo : Fig. 20
Come si può notare, il testo si apre con l indicazione del nome negozio, quindi riporta in calce i riferimenti per il contatto: numero di telefono e indirizzo e- mail. Questi dati, come succitato, sono compilati automaticamente in base alle informazioni negozio. Quando il sito viene rilasciato, questi sono compilati con info sample. Se ci portiamo all interno del menu CMS -> Informazioni Negozio, infatti, troviamo come Nome Negozio E-Commerce Demo, come numero di contatto (numero di telefono negozio) 02.01010101 e come e- mail di contatto (indirizzo e-mail negozio) esempio@negozio.com Fig. 21 Supponiamo di modificarli, inserendo le info del nostro cliente e più nello specifico: Nome negozio: My New E-shop E-mail di contatto: info@mariorossi.it Numero di contatto: 011.123456 Fig. 22
Ecco la nostra pagina Chi Siamo aggiornata con i nuovi dati, senza aver modificato nulla sulla pagina stessa. Fig. 23 Oltre a lavorare sulle variabili, è ovviamente possibile modificare il contenuto delle pagine, facendo attenzione a mantenere le variabili se si desidera mantenere la compilazione automatica dei dati del cliente. In dettaglio, possiamo modificare: - Titolo della pagina - Contenuto della pagina Procediamo! Portiamoci all interno del menu CMS, quindi selezioniamo la sottovoce Modifica pagine. Si aprirà la seguente schermata:
Fig. 24 Selezioniamo la pagina che desideriamo modificare e si aprirà la seguente schermata: Fig. 25 Nella prima schermata modifichiamo il titolo della pagina e decidiamo pagina è abilitata (attiva, visibile sul sito in front-end) o meno. Di default, tutte le 6 pagine inserite sono attive e a meno di casi particolari si raccomanda di non modificare questa impostazione. Passiamo alla modifica del contenuto: clicchiamo all interno del menu verticale di sinistra sulla voce Contenuto. Si aprirà la seguente schermata di modifica contenuto:
Fig. 26 Modifichiamo il testo, inseriamo immagini, tabelle, link, video tramite l editor. Se lo desideriamo, possiamo anche modificare il codice HTML e il CSS. Il cliente stesso potrà in seguito modificare le pagine, grazie alle credenziali Gestore. 3.2 Inserimento nuove pagine Nel caso in cui il nostro cliente desiderasse pagine statiche aggiuntive rispetto alle 6 preimpostate, possiamo procedere a crearle, tenendo in considerazione che sull E-Commerce sarà possibile visualizzare complessivamente fino a 10 pagine, inserite all interno del footer. Per la gestione del menu pagine nel footer rimanda a 3.3 Gestire il menu pagine, mentre per la gestione del menu di destra si rimanda a 4.1 Gestire i blocchi statici. Bene, procediamo a creare le nostre nuove pagine. Portiamoci sul menu CMS, quindi selezioniamo la sottovoce Pagine.
Si aprirà la seguente schermata (molto simile a quella vista in 3.1, con la differenza che l inserimento delle pagine non è accessibile al ruolo Gestore e quindi al cliente). Fig. 27 Clicchiamo su Aggiungi Pagina in alto a destra e si aprirà la seguente schermata. Fig. 28 Rispetto alla schermata di modifica pagina vista in 3.1, troviamo diversi campi/sezioni in più: URL Key: inseriamo qui l indirizzo che vogliamo appaia all interno della barra degli indirizzi del browser quando raggiungiamo questa pagina. L indirizzo è sempre http://nomesito/nomepagina. Definiamo il nome pagina. Ad esempio, se la pagina si chiama La nostra azienda, inseriamo
come URL Key La-nostra-azienda. All interno della URL Key non sono ammessi spazi Sezione Design: qui possiamo scegliere il layout della pagina. A meno di esigenze particolari da parte del cliente, consigliamo di mantenere inalterata questa sezione Sezione metadati: definiamo qui (se lo desideriamo) meta description e keywords della nostra pagina Compiliamo quanto sopra, quindi modifichiamo i contenuti dall apposita voce Contenuti e clicchiamo su Salva Pagina. La nostra pagina è stata aggiunta, la troviamo in elenco: Fig. 29 3.3 Gestione menu pagine Come abbiamo visto nei paragrafi precedenti, le pagine sono inserite all interno del footer del sito E-Commerce, disposte su di un menu. Ora vediamo come gestire l ordine di queste pagine all interno del menu. Portiamoci sul menu CMS, quindi sulla sottovoce Menu pagine statiche. Si aprirà la seguente schermata:
Fig. 30 Selezioniamo dai menu a tendina le pagine da inserire nelle varie posizioni del menu, le posizioni procedono dall alto verso il basso (Pagina 1 sarà quella più in alto e Pagina 10 quella più in basso). Notare come tra le pagine selezionabili appaiano anche le eventuali pagine aggiuntive create in 3.2. Quando abbiamo completato la nostra selezione, clicchiamo Salva. Le modifiche verranno visualizzate immediatamente sul nostro sito E- Commerce. 4. Impostazioni di vendita Il catalogo, ossia la parte dell E-Commerce riservata all esposizione dei prodotti, è preimpostato secondo una serie di default modificabili. Vediamoli. 4.1 Numero di prodotti e vista catalogo Portiamoci sotto il menu CMS, quindi selezioniamo la sottovoce Configurazione, da qui la voce Catalogo nel menu di sinistra. Si aprirà la seguente schermata:
Fig. 31 Queste le voci che ci interessano: Modalità Lista: scegliamo se visualizzare i prodotti: o A griglia, dando la possibilità all utente di cliccare per avere la visualizzazione a lista (Griglia (default)/lista). Questo è l attuale default su tutti i siti E-Commerce rilasciati o Solo griglia (Solo griglia): visualizzazione a griglia e nessuna possibilità per l utente di cliccare per avere la visualizzazione a lista o A lista, dando la possibilità all utente di cliccare per avere la visualizzazione a griglia (lista (default)/griglia) Valori permessi in prodotti per pagine della griglia e Valori permessi in prodotti per pagine della lista: indica il numero di prodotti massimo visualizzabile per singola pagina, selezionabile dall utente tramite l opzione Visualizza [NUMERO PRODOTTI] per pagina, presente in front-end. Valore predefinito per pagine della griglia e valore predefinito per pagine della lista: indica il default per entrambe le viste. Attualmente, vengono visualizzati 10 prodotti per pagina, dopodiché l utente viene invitato a portarsi alla pagina successiva
Consenti tutti i prodotti per pagina: consente di mostrare tutti i prodotti in una sola pagina Lisitno prodotti ordinato per: indica l ordinamento default dei prodotti. Su ogni sito e-commerce rilasciato, l ordinamento default è per prezzo. Da qui possiamo variarlo Recensioni prodotto: decidiamo se abilitare le recensioni anche agli ospiti o solo agli utenti registrati (default: abilitato anche agli ospiti) Impostazioni di avviso prodotto: definiamo come gestire gli avvisi prodotto. Di default sono abilitati. Per avvisi prodotto si intende l invio di una mail di avviso al cliente che si è iscritto agli avvisi prodotto da front-end, quando il prodotto torna in stock o cambia di prezzo Segnaposti immagini prodotti: è possibile inserire segnaposti personalizzati che verranno visualizzati nel caso in cui non sia caricata l immagine principale del prodotto. Di default ne trovate caricata una, se il cliente non ha particolari esigenze lasciate inalterato Opzioni prodotto scaricabile: di default il prodotto scaricabile sarà appunto scaricabile quando l ordine sarà indicato dal cliente (il merchant) come pagato, ossia quando emetterà e invierà al suo cliente ricevuta di pagamento (v. 6.1 Gestione Ordini). Volendo, è possibile rendere il prodotto scaricabile non appena l ordine viene inserito, secondo preferenze 4.2 Impostazione metodi di pagamento Sul nostro e-commerce è possibile gestire diversi tipi di pagamento, alcuni online e alcuni offline. Per metodi di pagamento online si intendono metodi di pagamento che concludono la transazione direttamente in fase d ordine: il cliente effettua l ordine e procede al pagamento. Il merchant deve comunque emettere e inviare al cliente ricevuta di pagamento, tramite l apposito pannello in backend, per completare l ordine, ma non preoccuparsi del pagamento
Per metodi di pagamento offline si intendono metodi di pagamento in cui la transazione avviene in maniera disgiunta e successiva rispetto all ordine: il cliente effettua l ordine e riceve le istruzioni per procedere al pagamento, quindi è onere del merchant verificare l avvenuto pagamento e concludere l ordine emettendo e inviando al cliente ricevuta di pagamento attraverso l apposito pannello in backend 4.2.1 Impostazione metodi di pagamento online Il nostro e-commerce gestisce tre metodi di pagamento online: Paypal (in versione standard o Express Checkout) Banca Sella (Gestpay) Unicredit (Pagonline) 4.2.1.1 Paypal Pagamenti standard nel sito Come funziona Paypal pagamenti standard sul sito: il cliente conclude l ordine sul sito, quindi viene reindirizzato sul sito di Paypal per effettuare il pagamento, utilizzando la propria carta di credito o il proprio account Paypal (non è necessario che il cliente possegga un account Paypal). Effettuato il pagamento, il cliente viene reindirizzato sul sito E-Commerce, dove riceve conferma d ordine in schermata e via e-mail. Per configurare questo metodo di pagamento, è necessario che: o Il cliente abbia attivato un account Paypal Business o Il cliente ci abbia fornito l indirizzo e-mail utilizzato per la registrazione dell account Paypal Business Procediamo quindi come segue: selezioniamo la voce CMS, quindi la sottovoce Configurazione, quindi selezioniamo dal menu a sinistra la sottovoce Metodi di Pagamento. Si aprirà la seguente schermata:
Fig. 32 Portarsi all altezza della voce Paypal Pagamenti standard nel sito e cliccare su Configura. Si aprirà la seguente schermata: Fig. 33 Inserire l indirizzo e-mail con cui il cliente ha registrato il proprio account Paypal Business quindi selezionare Sì nel menu a tendina Abilita questa soluzione. Il nostro account è configurato e da ora sarà possibile effettuare acquisti. Per verificarne l attivazione, simuliamo un ordine. Allo step Informazioni di pagamento troveremo l opzione Paypal. Fig. 34
4.2.1.2 Paypal Express Checkout Come funziona: il cliente può utilizzare questa soluzione per pagare in un click, senza dover inserire tutti i dati di fatturazione. Per configurare questo metodo di pagamento, è necessario che: o l cliente abbia attivato un account Paypal Business o Il cliente ci abbia fornito l indirizzo e-mail utilizzato per la registrazione dell account Paypal Business Come attivarla: Portiamoci sul menu Sistema, quindi selezioniamo la sottovoce Configurazione, dal menu a sinistra selezioniamo la voce Metodi di pagamento (fig.32), quindi portarsi all altezza della voce Paypal Checkout Express e cliccare su Configura. Si aprirà la seguente schermata: Fig. 35 Inseriamo l indirizzo e-mail associato all account Paypal Business del nostro cliente, quindi clicchiamo sul pulsante Reperisci Credenziali da Paypal.
Verremo reindirizzati sul sito di Paypal, seguiamo le istruzioni, otteniamo le credenziali e quindi inseriamole all interno degli appositi campi, quindi settiamo a Sì il menu a tendina Abilita questa soluzione. Il metodo di pagamento è configurato. Verifichiamolo aggiungendo un articolo al carrello, in alto nel carrello stesso noteremo che è comparso un pulsante tramite il quale effettuare il pagamento con Paypal Checkout Express. Fig. 36 Lo stesso pulsante lo ritroviamo all interno del carrellino in alto a destra (portandoci il mouse sopra si espande) Fig. 37 E all interno della sezione laterale in vista prodotto, in caso in cui decidiamo di non procedere subito all ordine ma di continuare lo shopping:
Fig. 38 4.2.1.3 Unicredit Pagonline Come funziona: