Come creare un e-commerce con Magento – Lezione 4

Magento è un software open source di ultima generazione, che permette di realizzare soluzione e-commerce professionali, robuste e affidabili. Nelle lezioni precedenti abbiamo visto come preparare l'ambiente di installazione sia in locale che in remoto, procedendo con l'istallazione completa dell'applicazione.

Magento è un software open source  di ultima generazione, che permette di realizzare soluzione e-commerce professionali, robuste e affidabili. Nelle lezioni precedenti abbiamo visto come preparare l’ambiente di installazione sia in locale che in remoto, procedendo con l’istallazione completa dell’applicazione. Possiamo finalmente iniziare a configurare il nostro negozio, collegandoci all’indirizzo dell’interfaccia di backend, che dovrebbe essere qualcosa del genere

 

 

L’URL esatto dipende da dove si trova il server (remoto o locale) e dal nome che abbiamo dato alla directory di amministrazione (in questo caso myadmin).

 

La prima cosa da notare, appena ci colleghiamo al backend, è che dalla dashboard principale ci vengono segnalate parecchie decine di messaggi, tra cui potremmo trovare anche dei messaggi critici. Non preoccupiamoci, perché in realtà si tratta di messaggi che descrivono il change log delle ultime versioni di Magento: se non ci servono possiamo cancellarli tranquillamente.

 

Prima di iniziare a configurare il nostro negozio introduciamo la terminologia utilizzata da Magento.

 

    • Negozi (store): dopo aver installato Magento abbiamo a disposizione un sito Web dedicato all’e-commerce. Pur disponendo di un singolo sito potremmo organizzarlo in modo da ospitare più di un negozio, ad esempio potremmo ospitare due o tre negozi che vendono prodotti diversi. Ciascun negozio sarà descritto da alcune pagine specifiche, dette Store Views. Tutti i negozi ospitati sullo stesso sito possono condividere carrello e clienti.

 

    • Internazionalizzazione: in alcuni casi le pagine specifiche nei negozi (le Store Views) potrebbero essere usate per rappresentare lo stesso negozio tradotto in diverse lingue. In questo scenario potremmo avere un sito con un solo negozio, dove ciascuna diversa Store View corrisponde ad una delle lingue supportate. Ad esempio, se volessimo vendere i prodotti sia in italiano che in inglese, potremmo avere due Store View: una per la lingua inglese, una per la lingua italiana.

 

    • Interfacce: uno degli aspetti più interessanti di Magento è quello di poter personalizzare completamente l’aspetto di ogni singolo negozio. Ciò viene realizzato specificando degli appositi temi, come nella maggior parte dei moderni CMS. Magento offre però un livello di astrazione supplementare: uno o più temi possono essere raggruppati all’interno di un’interfaccia. Per fare un’analogia possiamo pensare ad un tema come se fosse un file, e all’interfaccia come se fosse una directory contenente i diversi file (i temi): ogni interfaccia conterrà quindi diversi temi. Il vantaggio di questa struttura consiste nel poter applicare le interfacce sia a livello di sito Web, sia a livello di singolo negozio. In questo modo, ad esempio, possiamo applicare un’interfaccia al sito affinché tutti i negozi si presentino in modo simile, oppure possiamo applicare un’interfaccia specifica per ciascun negozio, lasciando così piena libertà di personalizzazione ad ogni singolo negozio.

 

 

Per sfruttare a pieno la possibilità di personalizzazione di Magento dobbiamo spiegare un po’ più in dettaglio come sono organizzati i diversi temi. Per affrontare l’argomento ci servirà introdurre alcuni termini un po’ più tecnici, ma non preoccupiamoci: questo livello di comprensione del funzionamento di Magento non richiede alcuna particolare competenza tecnica.

Terminologia tecnica

I temi contenuti nelle interfacce possono essere di due tipi. Ogni interfaccia contiene un tema di default, che viene utilizzato automaticamente per definire le modalità di visualizzazione delle pagine. Un tema di default deve essere completo, ovvero deve specificare tutti gli aspetti delle pagine. Ciò significa che un tema di default deve definire il layout, contenere i template delle pagine e tutte le risorse necessarie, come ad esempio i file CSS o le librerie JavaScript.

 

All’interno di un’interfaccia possiamo trovare alcuni temi detti “non di default”, in inglese Non-default themes. Questi temi vanno interpretati come delle modifiche specifiche rispetto al tema di default. Ad esempio, se vogliamo modificare l’aspetto delle pagine per adattare il negozio ad una promozione pasquale potremmo voler caricare qualche immagine ad hoc, come ad esempio una colomba. In questo caso potremmo creare un tema non di default specificando solamente le immagini o le risorse necessarie per implementare la modifica. I temi non di default sono molto utili per personalizzare alcuni aspetti di un negozio senza dover creare tutte le risorse richieste da un nuovo tema di default.

 

Un tema è composto dai seguenti elementi:

 

    • Layout: un set di file XML che stabilisce il layout delle pagine

 

    • Template: le pagine vere e proprie del negozio, realizzate in PHP e HTML, utilizzando delle tag PHP proprietarie del paradigma di Magento che permettono di creare nuove pagine in modo semplice e modulare

 

    • Locale: alcuni file di testo che contengono le etichette necessarie per tradurre nelle diverse lingue le pagine del negozio

 

    • Skin: l’insieme di immagini, fogli di stile e librerie JavaScript che stabiliscono l’aspetto delle pagine dei templates

 

 

Dal punto di vista pratico, quando andiamo ad analizzare la struttura di un template, Magento introduce il termine di blocco. Un blocco può essere di tipo strutturale oppure contestuale (nel senso che fa riferimento ad un particolare tipo di contenuto). I blocchi strutturali sono usati soltanto per descrivere il layout di un template e non ci interessano più di tanto. I blocchi contestuali, ovvero relativi ai contenuti, sono quelli che implementano le diverse funzionalità del e-commerce. Possiamo avere un blocco per le tag dei prodotti, un blocco per l’elenco dei prodotti, un blocco per l’iscrizione alla newsletter eccetera.

 

lezione4-1

 

Ciascun blocco contestuale sarà chiaramente contenuto all’interno di un blocco strutturale. Intervenendo a livello di blocco (contestuale) possiamo smontare e rimontare un tema come più ci piace, senza dover creare dei nuovi template da zero. In altre parole i blocchi sono i mattoncini elementari che possiamo usare per personalizzare l’aspetto di un negozio a nostro piacimento.

Primi passi

Per iniziare ad utilizzare Magento possiamo far riferimento alla documentazione ufficiale. Il manuale utenti di Magento è scaricabile gratuitamente da questo indirizzo.

 

Trattandosi di una guida completa il documento PDF è piuttosto corposo (oltre 500 pagine per un totale di circa 7MB). Ovviamente non dobbiamo leggerlo tutto, ma possiamo utilizzarlo all’occorrenza per risolvere problemi specifici. Iniziamo a vedere qualche esempio concreto, supponendo di voler verificare la configurazione del Locale, cioè il settaggio delle opzioni della internazionalizzazione. Se apriamo il manuale e cerchiamo la stringa Locale troviamo le istruzioni che ci servono. In questo caso dobbiamo cliccare sul menu SystemConfiguration per aprire una pagina come questa

 

lezione4-2

 

Nella sezione Locale Options possiamo impostare la definizione esatta del weekend, oppure il primo giorno della settimana.

 

Altre configurazioni che possiamo controllare, con l’ausilio della guida, riguardano le informazioni di contatto. Sempre dal menu  SystemConfiguration apriamo la sezione Store Information,  dove possiamo indicare alcuni dati del negozio, come ad esempio il nome e la partita IVA (il VAT number).

 

A questo punto possiamo iniziare a personalizzare il nostro negozio. Nelle pagine precedenti abbiamo già introdotto i concetti di tema e interfaccia. Per modificare l’aspetto del negozio clicchiamo sul solito menu SystemConfiguration, dopodiché selezioniamo la voce Design dal menu di sinistra.

 

lezione4-3

 

Che permette di gestire e configurare molti degli aspetti relativi ai temi e alle interfacce. Approfondiremo il funzionamento di questa pagina nelle prossime lezioni. Per fare qualche prova di modifica del tema possiamo selezionare la voce Design direttamente dal menu System

 

lezione4-4

 

Qui troviamo un pannello che permette di specificare alcune variazioni sul tema corrente. Ad esempio possiamo cambiare tema (all’interno lo stesso interfaccia) per uno o più periodi prestabiliti. Ciò permette di schedulare in anticipo l’aspetto dei diversi negozi, decidendo l’intervallo di tempo di validità di ciascuna variante. Le diverse variazioni programmate sul tema verranno indicate come in figura

 

lezione4-5

 

Questa funzionalità è molto comoda perché permette di programmare i cambiamenti di aspetto in anticipo, assicurandoci che vengano resi operativi in modo automatico. L’unica accortezza è quella di fare un po’ di attenzione quando inseriamo le date. A seconda della versione di Magento potrebbe esserci qualche imprecisione nella gestione dei widget Date Picker (il selettore di data). Ad esempio, potrebbe accadere di inserire la data del formato italiano e ritrovarsela memorizzata nel formato anglosassone. Il modo più semplice di risolvere problemi di questo tipo è quello di inserire le date manualmente, nel formato atteso dall’interfaccia (probabilmente il formato anglosassone). Se il problema persiste si può tentare di aprire nuovamente l’impostazione inserita (cliccando sul nome del tema) e poi salvare subito, senza inserire alcuna modifica. Magento proverà a sistemare il formato di tutte le date.

 

Consigliamo di fare qualche esercizio con questi strumenti prima di proseguire. Non appena riusciamo a modificare l’aspetto del sito, cioè ad aggiungere una riga alla tabella Design (pulsante Add Design  Change) possiamo verificare immediatamente la variazione dell’interfaccia di frontend. Ad esempio, passando dal tema default a quello default/modern si dovrebbe già vedere un cambiamento nell’aspetto del negozio. Nelle prossime lezioni vedremo come gestire in modo più dettagliato i temi di Magento.

Facci sapere cosa ne pensi!

Facci sapere cosa ne pensi!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *