Sviluppo di temi Magento Bootstrap

In questo secondo articolo della nostra serie di sviluppo del tema Magento, creeremo le basi del nostro nuovo tema. Imposteremo la struttura di directory di base del nostro nuovo tema, erediteremo dal tema Responsive predefinito di Magento, inseriremo CSS, JS e immagini nelle posizioni appropriate e creeremo un nuovo file local.xml per il nostro nuovo tema per includerli File CSS e JS nell'intestazione del nostro sito Web. Quindi iniziamo.

Creazione di una nuova struttura di cartelle tematiche

Il primo passo per creare il nostro nuovo tema Magento è impostare la struttura delle cartelle, dove possiamo posizionare i nostri nuovi file di tema. Dobbiamo posizionare i file del tema in due posizioni:

1. nel app / design / frontend cartella, dove aggiungeremo i nostri file phtml e xml
2. nel pelle / frontend cartella, dove aggiungeremo i nostri file immagine CSS, JS e relativi ai temi

Prima di iniziare a creare nuove directory all'interno delle directory menzionate sopra, è meglio decidere due nomi che useremo continuamente. Il primo sarà il nome del nostro pacchetto, che potrebbe essere il nome della tua azienda, il nome dell'autore del tema o altro, e il secondo sarà il nome del tema. Per questo tutorial, useremo 'tutsplus'come il nome del pacchetto, e'vstyle'come il nome del tema. Dopo aver deciso questi due nomi, iniziamo a creare le cartelle.

Per prima cosa, creiamo questi percorsi nella nostra cartella app e skin:
[Directory Magento] / app / design / frontend / package_name / theme_name /
[Directory Magento] / skin / frontend / package_name / theme_name /

Che nel nostro caso diventerà: 
[Directory Magento] / app / design / frontend / tutsplus / vstyle /
[Directory Magento] / skin / frontend / tutsplus / vstyle /

Una volta create queste cartelle, aggiungiamo queste quattro cartelle nel app / design / frontend / tutsplus / vstyle directory:

1. disposizione
2. modello
3. località
4. eccetera

E queste quattro cartelle nel pelle / frontend / tutsplus / vstyle cartella:

1. css
2. immagini
3. js
4. font

Attivazione del tema

Attiva il tema ora, per vedere come stanno le cose. Per quello, vai a Sistema> Impostazioni> Progettazione, inserisci "tutsplus" nel Nome del pacchetto corrente campo e 'vstyle' nel Modello campo e salvare. Ora aggiorna la prima pagina del nostro negozio e vedrai che tutta la pagina è incasinata. Va bene; lo renderemo funzionante ereditandolo dal tema reattivo predefinito di Magento nel passaggio successivo.

Eredità

Prima di Magento 1.9, Magento non aveva una funzione di tema figlio. Ci siamo basati sul modello di fallback di Magento per utilizzare il tema predefinito di Magento per occuparci di molte funzionalità. Ma per fortuna, ora in Magento versione 1.9, possiamo creare un tema figlio di qualsiasi tema ed estendere il suo aspetto e la sua funzionalità senza problemi. 

In questo tutorial, creeremo il nostro nuovo tema come tema secondario del tema RWD di Magento. Per questo dobbiamo semplicemente creare un nuovo file theme.xml in questa cartella: app / design / frontend / tutsplus / vstyle / etc.

Inserisci questo codice in questo file XML:

  RWD / default 

Ora aggiorna la prima pagina del tuo negozio Magento e vedrai un sito completamente funzionante.

Il motivo per cui il sito sta funzionando perfettamente è che ora abbiamo ereditato il nostro nuovo tema dal tema RWD. Ciò significa che durante il rendering del nostro nuovo tema, se Magento non trova alcun file in questo nuovo tema, andrà a cercare nel tema Magento RWD e, se trovato lì, Magento lo userà. 

Poiché il nostro nuovo tema non ha ancora file, tutti i file vengono recuperati dal tema RWD di Magento, quindi l'aspetto attuale del nostro sito è identico al tema RWD. Ma ora abbiamo la flessibilità di modificare questi aspetti creando i nostri file tema ovunque sia necessario, e tutti gli altri file saranno ereditati dal tema RWD.

Un altro vantaggio dell'utilizzo di questo approccio è che con l'aggiornamento delle versioni di Magento, il tema Magento RWD viene spesso aggiornato. In questo modo il nostro tema avrà sempre un ripiego sull'ultimo tema di Magento per fornire supporto per le ultime funzionalità e correzioni di bug.

Inserimento di file CSS, JavaScript e di immagini

Ora inizieremo a modificare questo nuovo tema figlio che abbiamo appena creato. Per questo, iniziamo copiando CSS, JS e file di immagini dal nostro sito HTML in questa posizione nel nostro negozio Magento:

pelle / frontend / tutsplus / vstyle /

Come accennato in precedenza, abbiamo creato tre cartelle in questa posizione, vale a dire js, immagini, font, e css. Inserisci i file CSS, JS e immagini nelle rispettive cartelle.

Creazione di un nuovo file local.xml

Il semplice inserimento di questi file CSS e JS non li includerà nel tuo sito Magento. Per questo dobbiamo aggiungerli manualmente al blocco di intestazione del nostro Magento HTML. 

Ai fini di questo tutorial, creeremo solo un file XML e inseriremo tutte le nostre modifiche in quel file. Chiameremo quel file XML local.xml, dato che questo file è reso alla fine di tutti gli altri file XML, e sovrascrive anche la funzionalità di altri file XML. Creeremo questo file in questa posizione della cartella:

app / design / frontend / tutsplus / vstyle / disposizione

Una volta creato questo file, aggiungeremo il seguente codice in questo file, per includere i file CSS e JS nell'intestazione del nostro sito web.

    skin_jsJS / bootstrap.min.js skin_jsJS / jquery.carouFredSel-6.2.1-packed.js skin_jsJS / jquery.easing.1.3.js skin_jsJS / jquery.elevatezoom.js skin_jsJS / jquery.flexslider.js skin_jsjs / owl.carousel.js skin_jsJS / jquery.sequence-min.js skin_jsJS / script.min.js  css / bootstrap.css css / bootstrapTheme.css css / font-awesome.min.css css / flexslider.css css / owl.carousel.css css / owl.theme.css css / sequenza looptheme.css css / style.css css / style8.css   

Lasciatemi spiegare il codice sopra passo dopo passo. Sotto il layout (che implica che questo handle è correlato al layout) e l'handle predefinito (poiché verrà utilizzato per tutti i casi predefiniti), abbiamo creato un nuovo blocco e lo abbiamo fatto riferimento a "head", il che significa che queste modifiche avranno effetto solo nel blocco 'testa'. Successivamente abbiamo utilizzato due metodi di azione per aggiungere file CSS e JS separatamente. Per aggiungere file JS, abbiamo utilizzato questo codice XML:
skin_jsJS / js javascript_file_name

E per includere i file CSS, abbiamo usato questo codice XML:
css / css_file_name css

Per garantire che questi file CSS e JS siano effettivamente inclusi nel nostro nuovo tema, aggiorna la pagina principale del negozio e premi Controllo-U per controllare il codice sorgente della pagina. Qui nella sezione head, dove dovresti vedere i file CSS e JS appena aggiunti. Fare clic su ciascuno di questi collegamenti per assicurarsi che si colleghino a file appropriati e non vi siano collegamenti interrotti.

A questo punto, si spera, inizierai a vedere alcuni cambiamenti nell'aspetto del tuo sito web. Abbiamo appena iniziato a modificare questo tema. Nel prossimo articolo di questo corso, inizieremo a modificare i file phtml dell'intestazione, del piè di pagina e di alcune altre pagine del modello. Ecco come il nostro tema guarda a questo stadio.

Nella sezione commenti qui sotto, facci sapere se sei in grado di seguire le istruzioni finora. Inoltre, fammi sapere se ti è piaciuto l'articolo. Ci piacerebbe sentire le tue opinioni.