Introduzione

Avere una grafica accattivante e gradevole è importante, ispira fiducia, accresce l’immagine del negozio rimandando ad un uguaglianza tra sito ben curato=sito affidabile.

Maggiore è la cura per il negozio, per integrarlo con i prodotti che contiene, maggiore sarà anche il riscontro in termini di guadagni.
Ora senza dilungarci oltre su fattori psicologici che possono spingere ad una maggiore fiducia per i siti ben curati, iniziamo una panoramica su come personalizzare l’interfaccia grafica del nostro negozio.

L’obiettivo non è quello di spiegare passo passo come modificare un tema per ottenere quello che vorreste vedere, questa non è una guida di design completo e perciò non staremo a spiegare CSS e HTML, ma solo dove andare a mettere le mani per fare le modifiche che poi vorremmo implementare al nostro negozio.

Struttura dei temi di Magento

È bene conoscere i termini che verranno utilizzati per indicare le varie parti che andremo ad analizzare:

  1. Temi: contengono i file che determinano la visualizzazione del frontend del negozio; può appartenenere ad un solo pacchetto design.
  2. Pacchetti design: è un insieme di temi correlati.

Per creare la visuale dello store il tema è composto da due parti fondamentali, divise in due cartelle:

app/design, la quale contiene a sua volta layout, template, locale, tutti file e cartelle che controllano come la pagina del template viene presentata.

skin CSS, immagini, javascript, sono file che controllano l’aspetto del tema, quindi della pagina.

Sono salvati su due percorsi diversi, perciò il tema è spezzettato, per garantire diversi livelli di permessi per le cartelle del server.

Vediamo velocemente cosa contengono le varie cartelle, i primi si trovano in/app/design/frontend/NOMEDELTEMPLATE

  1. Layout: contiene i file XML che definiscono la struttura dei blocchi per le diverse pagine.
  2. Template: contiene i file PHTML che contengono i dati XHTML e PHP necessari a creare la visuale logica per la presentazione grafica. (differenziamo in pagine template e blocchi template)
  3. Locale: contiene file di testo CSV che contengono le varie stringhe tradotte per ogni lingua per ogni testo relativo all’installazione di Magento.

Per la seconda parte le cartelle le troviamo in /skin/frontend/NOMEDELTEMPLATE e sono:

  1. CSS: contiene i file CSS necessari a creare lo stile visivo del tema
  2. Images: contiene tutte le immagini usate nel tema.
  3. JS: contiene particolari funzioni per il tema in java-script che possono essere richiamate.

Come viene gestito un tema da Magento?

Come già detto l’insieme dei temi correlati viene raggruppato in un pacchetto design, troveremo nella nostra installazione due di questi pacchetti già inseriti: base e default.

Il primo contiene il tema di default, il secondo contiene diversi temi ma è da notare che ha sempre un tema di default. Questo è molto importante, infatti ogni pacchetto deve contenere un tema di default in modo tale che se Magento cerca di aprire un file relativo a quel tema e non viene trovato andrà a cercarlo dentro il tema di default del pacchetto, se non viene trovato nemmeno qui allora la ricerca verrà estesa al tema di default del pacchetto base.

La struttura di questo tipo di ricerca ci viene incontro nei casi in cui non vogliamo creare un tema da zero, possiamo anche evitare di inserire tutti i file template e modificare solo quelli che ci interessano, quelli mancanti verranno caricati dal tema di default.

Personalizzare il tema

Ora che abbiamo capito come Magento gestisce i temi possiamo iniziare a capire quali sono i vari passi da fare per personalizzarlo.

Per capire dove mettere le mani dobbiamo sapere cosa vogliamo modificare, per fare questo Magento ha implementato una struttura a blocchi. I blocchi sono il modo in cui magento riesce a distinguere le stringhe funzionali del sistema creando una struttura modulare. Per creare il risultato visivo che contraddistingue un tema per Magento ci sono due tipi di blocchi che lavorano insieme:

Blocchi strutturali: sono stati creati con lo scopo di delineare una struttura per la pagina, sono l’header, il footer, colonna principale e colonna di sinistra

Blocchi di contenuti: sono i blocchi che, inseriti dentro i blocchi strutturali, contengono i contenuti della pagina. Sostanzialmente richiamano al loro interno i contenuti dei file template per creare l’XHTML per l’inserimento dentro il blocco strutturale a loro assegnato. Gestiscono le varie funzionalità del sito, come il carrello, la lista delle categorie ecc..

L’insieme di questi due blocchi viene detto Layout, il quale svolge la funzione di definire entrambi i tipi dei blocchi e di informare Magento in merito alla loro connessione.

Le stutture del Layout sono:

  • Empty
  • 1 Column
  • 2 Columns with left bar
  • 2 Columns with right bar
  • 3 Columns
  • Popup
  • Redirect
  • Print

Sono semplici da identificare, la prima indica una pagina vuota senza header e footer, le altre indicano una combinazione di colonne, possiamo avere entrambe le colonne laterali o solo una, ricordandoci che la colonna principale rimane sempre.

Creare le cartelle e impostare Magento

Per installare il nostro design personalizzato abbiamo bisogno dei percorsi in cui copiare i file relativi alle modifiche effettuate, perciò tenendo i percorsi dei file citati in precedenza dovremo aggiungere le catelle di cui abbiamo bisogno per fare le modifiche, non serve ricreare tutte le cartelle e i file perché, come già detto, le parti del tema che non vogliamo modificare verranno richiamate dal tema di default. Ricapitolando è fondamentale aggiungere in app/design/frontend e skin/frontend le cartelle con il nome del vostro nuovo design, al loro interno poi vanno create le cartelle default e poi le varie cartelle e i file con le modifiche da apportare.

Ora bisogna impostare il nuovo tema dal backend, andate alla voce sistema>configurazione>design, se abbiamo più negozi ci dobbiamo ricordare che in alto a sinistra dobbiamo selezionare il negozio su cui vogliamo apportare le modifiche, o anche solamente alla vista negozio che vogliamo modificare. Alla voce “nome del pacchetto corrente” dobbiamo inserire il nome del pacchetto design in cui si trova il nuovo tema, se questo form viene lasciato vuoto Magento assegna la voce “default”. Nel pannello Tema, alla voce “default” invece bisogna inserire il nome del tema, poi salvare le modifiche.

I tasti “aggiungi eccezione” sotto ogni form servono per indicare delle eccezioni relative alla versione e al tipo di browser, in modo da poter assegnare temi differenti anche per la navigazione da cellulare (basta inserire il nome del dispositivo alla voce templates, sotto c’è la dicitura match expression, mentre in “value”il nome della cartella del design che si vuole assegnare).

risorsa: emergento.com