Come creare un nuovo tema per Magento

Chi viene da un mondo differente da quello di Magento può trovare parecchie difficoltà nella realizzazione di un tema personalizzato.
In questo articolo cercherò di dare dei consigli di partenza per approcciarsi in modo corretto nella realizzazione del tema o “design” come viene chiamato in Magento.

Struttura di base

Magento ha una struttura di base leggermente diversa rispetto a tanti altri cms. Mentre solitamente si è abituati a trovare una cartella “themes” da qualche parte, magento possiede due cartelle distinte:

  • app/design/frontend/ per la parte strutturale
  • skin/frontend/ per gli stili, i file js e le immagini

Entrambi i percorsi offrono una struttura particolare, riepilogata in questo schema:

Struttura Design magento

La prima cartella che troviamo rappresenta il “design package” cioè il pacchetto che contiene un intero “aspetto” grafico; dentro queste cartelle possiamo trovare poi una o più cartelle che rappresentano i temi e le diverse varianti (chiamati appunto semplicemente “design“).

 

 Funzionamento di base

La struttura sopra descritta può sembrare a prima vista un pò complessa e dispersiva, in realtà permette una gestione ben organizzata del tema in modo da facilitarne l’aggiornamento e il caricamento nella cache.

Magento, una volta impostato un certo tema, carica tutti i file presenti nella cartella del design omonimo. Se non li trova li cerca in default, del medesimo package; se nemmeno lì trova i file di cui ha bisogno li prende dal pacchetto base. Prendendo come esempio sempre lo schema sopra riportato, facciamo l’esempio di un Magento che abbia impostato il design “Variation Theme 2”. Magento caricherà quindi tutti i file che gli servono per il frontend da quella cartella; quelli che mancano, andrà poi a ricercarli nella cartella “default” del medesimo package design (“Custom package”); infine i file che ancora mancano all’appello magento li andrà a recuperare dal package “base” alla cartella “default”.

E’ facile intuire come la cartella “base” sia appunto la base di tutto ciò che viene mostrato nel frontend. Ogni singolo blocco o funzione di magento possiede un proprio file di tema specifico, percui un tema completo dovrebbe avere oltre 600 file. Fortunatamente grazie a questo sistema il tema personalizzato avrà al massimo qualche decina di file, solamente quelli necessari a far cambiare aspetto al frontend. Questo stratagemma permette quindi di aggiornare Magento in tutta tranquillità perché il cambio di versione di un aggiornamento muterà solo la cartella “base” e non le altre personalizzate. In questo modo aggiornare il proprio tema sarà estremamente semplice dato che i file da controllare e adattare saranno pochissimi.

Template, Layout e locale

Magento suddivide la parte strutturale del frontend in tre parti principali: layout, template e locale. Il primo, scritto in linguaggio xml, si occupa di organizzare i blocchi formando quindi lo scheletro di organizzazione delle varie parti e delle funzionalità; il template invece contiene le funzionalità php e l’html vero e proprio (un mix di php e html e per questo con estensione .phtml); locale invece contiene i csv di traduzione per stringhe specifiche del tema che non sono contenute nella normale localizzazione della piattaforma.

 

Come procedere

Per creare un tema è chiaro che NON SI DEVE MAI copiare l’intera cartella base altrimenti la suddivisione e l’organizzazione che offre magento risulterebbe vana (per non parlare di eventuali aggiornamenti dove necessitano di essere controllati centinaia di file).

Per agevolare gli sviluppatori, il team di sviluppo ha pensato bene di offrire alla comunità un tema pulito e privo di qualsiasi personalizzazione grafica; la trovi già nella tua installazione: il percorso è default/blank/.

Per creare quindi il proprio tema personalizzato la prima cosa da fare è creare le directory corrette. Ad esempio:

  • app/design/frontend/mytheme/default/template
  • app/design/frontend/mytheme/default/layout
  • skin /frontend/mytheme/default/

Al loro interno devi quindi inserire il contenuto delle directory di blank, sia di app che di skin.

Terminata anche questa parte, non ti resta che impostare il tuo nuovo tema da backend:

System-> Design -> Add design change

e impostare il design appena creato (Ricordati che durante questa fase la cache di Magento deve essere disabilitata!!).

 

Ora sei pronto per personalizzare il tuo nuovo tema!

 

Hai incontrato difficoltà nel creare il tema con questa guida? Lascia un commento!

 

 

Risorse utili per approfondire l’argomento:

Designer’s Guide Ufficiale Magento (ENG)

Magento – Guida al design (ITA)