Temi Magento estendere il tema responsive RWD

Magento è una delle migliori soluzioni per la realizzazione di un e-commerce professionale e che permetta una estrema flessibilità sia dal punto di vista implementativo che da quello delle funzionalità.

Una delle più grandi carenze durante la rivoluzione delle interfaccia e del boom dei dispositivi mobile era di certo l’assenza di un tema per Magento responsivo: questo carenza è stata pienamente colmata con il rilascio della versione 1.9.1 di Magento che ospita ed utilizza come tema di default il tema denominato RWD.

RWD è un tema completamente responsivo che ha dalla sua parte anche il grande vantaggio di consentire agevolmente, per quanto questa parola sia applicabile nell’ambito di Magento, semplici modifiche quali ad esempio quella più semplice della modifica del colore principale del tema che nel caso specifico è blue.

Cerchiamo come al solito di preservare i file del core così da non limitare la possibilità di aggiornare in futuro la nostra installazione di Magento. Questa è assolutamente una legge per Magento: estendi non sovrascrivere!!!

Passo importante per estendere il tema RWD è di certo comprendere, e quindi installare, Sass/Compass.

La tecnologia Sass/Compass possiamo vederla come una evoluzione del CSS che cerca di semplificarne lo sviluppo introducendo la possibilità di dichiarare varibili e molto altro. Come parte dei linguaggi di programmazione necessita di uno step di compilazione che genera i meglio conosciuti file CSS.

Vi rimando all’articolo per l’installazione di Sass/Compass.

Terminata l’installazione possiamo iniziare a sporcarci le mani.

Il tema RWD è disponibile nei seguenti percorsi

app/design/frontend/rwd
skin/frontend/rwd

Creiamo le cartelle che ospiteranno il nostro tema: nel mio caso, avendo deciso di chiamare il pacchetto giorgiomen ed il tema green, creerò queste cartelle allo stesso livello di quella rwd.

app/design/frontend/giorgiomen/green/
skin/frontend/giorgiomen/green/

La prima cartella è dedicata alle dichiarazioni utili per far conoscere il tema a Magento, mentre la seconda è necessaria per quella che è l’effettiva parte di presentazione.

Creiamo la cartella del nostro tema allo stesso livello della cartella del tema RWD impostando giorgiomen come nome del pacchetto e green come nome del tema. Ora creiamo una nuova cartella all’interno della cartella green denominata etc questa ci sarà utile per inserirvi il file theme.xml che definisce che il tema è figlio del nostro tema RWD.

Ecco il suo contenuto

<?xml version="1.0"?>
<theme>
    <parent>rwd/default</parent>
</theme>

In questo modo Magento saprà di dover prendere i file assenti e referenziati all’interno del nostro tema in quello default del pacchetto RWD.

Completata questa operazione procediamo con la cartella skin.

Ricreiamo una struttura simile a quella creata in app creando cioè allo stesso livello della cartella rwd la nostra cartella giorgiomen che contiene come nel caso precedente la cartella green.

All’interno della cartella green appena creata copieremo parte del contenuto del di quella rwd.

Come mostrato nelle immagini sopra copieremo esclusivamente i file utili al nostro scopo e per l’esattezza

  • la cartella skin/frontend/rwd/default/images
  • la cartella skin/frontend/giorgiomen/green/scss 
    • di questa cartella ci occorreranno esclusivamente la cartella content ed i file
      • _core.scsss
      • _framework.scss
      • _var.scss
      • .htaccess
      • config.rb
      • email-inline.scss
      • email-non-inline.scss
      • madisonisland-ie8.scss
      • madisonisland.scss
      • scaffold-forms.scss
      • styles-ie8.scss
      • styles.scss

Effettutata questa copia possiamo di avere quasi finito, modifichiamo il contenuto file config.rb con il seguente contenuto

# note: this should never truly be refernced since we are using relative assets
http_path = "/skin/frontend/giorgiomen/green/"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
relative_assets = true

add_import_path "../../../rwd/default/scss"

output_style = :expanded
environment = :production

Le modifiche apportate riguardano il parametro http_path dove definiamo la cartella del tema e l’aggiunta della direttiva add_import_path nella quale definiamo la cartella dei file scss da importare dal tema RWD.

Completata questa operazione apriamo il file _var.scss.

Il tema prevede già l’utilizzo la possibilità di modificare il colore del tema e questo file contiene tutte le variabili che riguardano i colori e che vengono utilizzate in tutti gli altri file del tema.

Il colore utilizzato nel tema è definito nella variabile $c-blue come possiamo vedere all’interno di questo file sono già definiti molti colori anche se non utilizzati


$c-blue: #3399CC;
$c-green: #11B400;
$c-pink: #D85378;
$c-orange: #F3793B;
$c-red: #CF5050;
$c-yellow: #FFDD15;
$c-black: #000000;
$c-gray: #333333;

Ci basterà modificare nel file _var.scss tutte le occorrenze della variabile $c-blue con $c-green così da variare il colore base del tema dal blue al verde: evitate di procedere con la classica operazione del “replace all” poichè dovrete essere attenti a non modificare anche la definizione della variabile mostrata sopra per evitare di incorrere in eventuali problemi di compilazione.

Ora rechiamo nella cartella skin/frontend/giorgiomen/green/scss ed eseguiamo il comando


compass watch

Questa operazione compilerà i file scss creando i file css come mostrato nella seguente immagine.

 

Questa operazione resterà in attesa che voi la fermiate con il ben noto CTRL+C.

Come potremo notare la compilazione creerà la cartella skin/frontend/giorgiomen/css.

Possiamo dire di aver quasi completato le operazioni di creazione del nostro tema: non ci resta altro che informare Magento di utilizzare il nostro nuovo tema.

Accediamo all’amministrazione e rechiamoci nella configurazione del sistema seguendo il percorso:

System -> Configuration -> General -> Design

Sostituiamo i dati presenti nelle tab verticali Package e Themes

I dati da inserire saranno i seguenti:

  • Nel tab Package sostituire il dato Current Package Name che è valorizzato con “rwd” con il nome del nostro pacchetto che nel nostro esempio è “giorgiomen
  • Nel tab Themes valorizziamo il campo Default, che dovrebbe essere vuoto in una installazione base, con il nome del nostro tema che come da esempio è “green

A questo punto salviamo la configurazione appena modificata e rechiamoci in frontend, vedremo che le nostre modifiche sono andate a buon fine ed il nostro tema è passato dal blue base del tema rwd al nostro caro verde come mostrato nell’immagine sotto

Potrebbe accadere che il risultato non sia quello sperato: il primo controllo da effettuare è quello di accertarsi di aver verificato la cache di Magento. Ci basterà recarsi in backend seguendo il percorso

System -> Cache Management

Giunti in questa schermata possiamo scegliere se disabilitare la cache o semplicemente effettuare un flush così da aggiornarla in base alle nuove modifiche effettuate: consiglio sempre di mantenere la cache disabilitata fino a quando avremo terminato lo sviluppo di temi o di moduli.

Come sempre non resta altro che complimentarci per il nostro operato, meritiamo ancora una volta un grande Ottimo lavoro!

Commenta

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