Share
In questo articolo, tratteremo le basi del layout XML di Magento.
Andremo oltre local.xml e fare alcune modifiche di base. Ciò includerà l'aggiunta e la rimozione di script, la rimozione di blocchi e l'aggiunta di modifiche al layout.
Ora che abbiamo una conoscenza di base della gerarchia dei temi dal primo articolo di questa serie, ci addentreremo un po 'più in profondità e spiegheremo i file dei template.
I file di template sono costituiti da due sottodirectory di cui sono:
Accentsconagua
app / design / frontend ///disposizione/ app / design / frontend ///modello/ C'è molto da coprire, per questo motivo li dividerò nei loro articoli. Oggi copriremo solo l'aspetto del layout. L'aspetto del modello entrerà in gioco nel prossimo articolo.
Aspetta, prima ancora di iniziare, dobbiamo fare una cosa fondamentale che è disabilitare la cache Magento, se non lo hai già fatto, è così! In tal modo, ci permetterà di visualizzare le nostre modifiche all'istante piuttosto che dover aggiornare la cache ogni volta che apportiamo una modifica. Idealmente dovrebbe essere spento durante lo sviluppo di un sito. Per fare questo accedi all'area di amministrazione e vai su sistema> gestione cache e disabilita tutto.
Ora è risolto iniziamo.
La cartella di layout contiene i file XML che dettano in gran parte ciò che viene visualizzato sul front-end del negozio. La struttura del layout è piuttosto complessa in Magento, tuttavia questo è uno dei motivi che lo rende così potente e flessibile.
Troverete centinaia di file XML ognuno che fa le proprie cose, ogni vista o modulo in app / code / ottiene il layout specificato dal proprio file XML. Se installi un modulo di terze parti nel tuo negozio e questo influisce sul front-end, avrà sicuramente il suo file XML.
Quindi, come faccio a sapere quale file modificare se necessario?
Bene, la convenzione di denominazione dei file rende più facile rintracciare quando è necessario apportare modifiche. Ad esempio, Magento app / code / core / Mage / Pagina / il modulo ha il proprio file XML chiamato app / design / frontend / base / default / layout / page.xml come puoi vedere c'è uno schema che inizia a emergere qui! Una volta che hai familiarizzato e fatto alcuni negozi, noterai presto alcune ripetitività e ricorderai quali file devi modificare.
Nota:Si prega di essere consapevoli dei moduli di terze parti, in quanto tecnicamente lo sviluppatore può denominare il proprio file XML tutto ciò che desiderano. In questo scenario, a meno che non sia nella loro documentazione, dovrai cercare il nome del file all'interno del modulo stesso che di solito si trova nel config.xml file. Nota anche che non tutti i moduli hanno un file XML, di solito il file XML sarà presente solo se interessa il front-end del negozio, quindi non aspettarti uno tutto il tempo!
Percorso per la configurazione: app / code / local /
Notare che ho fatto riferimento Base / default sopra, ricorda che questi sono dove risiedono i file core, se hai bisogno di fare delle modifiche, copialo sempre sul tuo pacchetto / a tema mai modificare Base / default File.
Così:
app / design / frontend / base / default / layout / page.xml
copia a:
app / design / frontend /
La modifica di questi file richiede molto tempo e, essendo questo un tutorial per principianti, va oltre lo scopo di questa serie; comunque, mi troverò di fronte local.xml e in che modo questo si collega allo sviluppo del tema e copre una serie di modifiche di base che ritengo possano essere utili.
In parole povere, si tratta di un file inserito nella nostra cartella di layout del tema che ospiterà un'ampia porzione dei nostri override o aggiornamenti ai riferimenti XML per quel tema. È considerato una buona pratica e Magento lo consiglia. Potremmo considerarlo come la versione di Magento di WordPress functions.php file.
Aspetta, una "grande porzione" perché non "tutti" i nostri override o aggiornamenti?
C'è un dibattito su questo argomento e se abbiamo fatto un po 'di ricerca troveremo che ognuno ha la propria opinione. Alcuni diranno solo uso local.xml e non apportare modifiche altrove, mentre altri non saranno d'accordo, quindi non prendere la seguente serie nella pietra.
Personalmente penso che sia il posto ideale per piccole modifiche, come l'aggiunta di blocchi, la rimozione di blocchi o la modifica di modelli. Non è un posto dove impaginare completamente la tua pagina di prodotto o simili, se vuoi farlo, fallo nel file pertinente, ad es. catalog.xml
Sì, potrebbe salvarci un po 'di tempo quando aggiorniamo Magento visto che tutte le nostre modifiche sono in un unico file, ma in primo luogo ottenendo tutte le nostre modifiche in un singolo file, con tutti i grattacapi di cercare di sovrascrivere altri file XML, semplicemente viene superato.
Inoltre, quando facevamo una grande quantità di modifiche a una pagina che idealmente vogliamo fare riferimento all'altra XML che fa parte di quella pagina, dovremmo passare continuamente tra i due file e, alla fine, divideremo la funzionalità tra due file separati - non quello che vogliamo veramente!
Quindi, come configurarlo ...
Crea il local.xml file nella cartella del layout del tema app / design / frontend / e aggiungi una struttura di markup XML di base:
Ora che abbiamo il nostro file pronto, ti mostrerò una manciata di tecniche comuni.
Una modifica molto comune è aggiungere o rimuovere JavaScript e CSS. Se stai lavorando con jQuery dovrai aggiungere questo in quanto Magento non lo include per impostazione predefinita e qualsiasi JavaScript personalizzato richiesto richiede anche l'aggiunta di.
Se visualizziamo il codice sorgente su un'installazione di Magento vedremo un intero gruppo di JavaScript inserito, alcuni dei quali non verranno utilizzati, nel qual caso è necessario rimuoverlo poiché non è necessario http richiesta - Magento non è veloce, quindi facciamo le basi giusto!
Per includere un file, dobbiamo decidere se sarà globale per esempio su ogni pagina del nostro negozio o solo su determinate aree. Con questo possiamo selezionare l'handle di layout corretto da usare.
Introdurrò due maniglie di layout,
Il
Ora, sul codice.
skin_js JS / libs / jquery.min.js ]]> skin_js JS / libs / modernizr.min.js skin_js js / libs / html5shiv.min.js IE 9 skin_js JS / libs / respond.min.js IE 9 skin_js JS / libs / selectivizr.min.js IE 9 skin_css css / widgets.css skin_css css / print.css skin_css css / stili-ie.css IE 8 skin_js JS / ie6.js IE 7 js lib / ds-sleight.js IE 7 skin_js JS / libs / home.min.js skin_css css / home.css
C'è parecchio da fare qui ma quando è rotto è relativamente semplice.
tipo di file / posizione percorso del file
Seguendo il secondo punto: Stabilisce anche dove il file si trova nella gerarchia, ogni tipo fa riferimento a una posizione diversa nella gerarchia che viene anteposta a ciò che si inserisce nel
pelle / frontend // Default / nome pelle / frontend // Default / nome
js / nome Si noti che il caricamento di un file da una fonte esterna come un CDN ha una sintassi leggermente diversa. Inoltre è importante includere il jQuery.noConflict (); alla fine per evitare jQuery in conflitto con Magento costruito nella libreria Prototype.
Magento viene fornito in bundle con più blocchi della sidebar che, diciamocelo, non verranno mai utilizzati in una situazione di vita reale, come la pubblicità "Back to School". Di seguito sono due metodi che possiamo usare:
right.poll
Il rimuovere metodo è un buon modo per rimuovere un blocco indipendentemente da quale handle del layout ha caricato il blocco, a volte vogliamo solo che sia andato a livello globale, non importa dove sia e per non tornare mai!
D'altro canto unsetChild rimuoverà solo un blocco all'interno di un handle di layout specifico. Puoi vedere che lo sto chiamando nel destra Impugnatura del layout in modo che venga rimossa solo da lì. Se la right.poll il blocco viene richiamato da qualsiasi altra parte in un diverso handle di layout che verrà visualizzato.
Qui abbiamo un esempio di aggiungere un blocco strutturale addizionale alla homepage. Stiamo facendo riferimento al blocco del contenuto e utilizzando il dopo tag per specificare il blocco da visualizzare alla fine del blocco del contenuto.
Infine, abbiamo un esempio di aggiunta in un blocco CMS statico, ma prima è necessario crearne uno per farlo funzionare.
Una volta effettuato l'accesso all'area di amministrazione, dirigersi verso CMS> Blocchi statici e aggiungi un nuovo blocco. Prendi nota di "Identificatore" poiché dobbiamo fare riferimento a questo nel codice XML.
home_static_block
All'interno del block_id è dove inseriamo il nostro identificatore.
Abbiamo appena scalfito la superficie e ci sono molti altri usi per XML, per non parlare di più maniglie di layout e tag XML a nostra disposizione. Lo stesso layout di Magento merita di essere una serie poiché c'è molto da coprire, per ora lo tengo alle sole nozioni di base.
Se vuoi approfondire la lettura dell'XML, ti consiglio di leggere questo articolo e di scaricare una copia della Guida alla progettazione ufficiale di Magento che approfondisce e fornisce una buona spiegazione degli altri tag XML che possiamo usare.
Nel prossimo articolo, andremo avanti e esamineremo i file del modello.
