Layout e modelli personalizzati con Magento

Nella prima parte di questa serie abbiamo appreso le basi dello sviluppo del modulo Magento inclusa la struttura delle directory di Magento, la struttura del modulo personalizzato e abbiamo creato un modulo base "Hello World" per capire come funzionano i controller in Magento.

In questo articolo, impareremo come creare blocchi e file di layout. Nello specifico, vedremo come funzionano i file di layout e i file di blocchi in Magento e vedremo il rendering dei file di layout.

Alla ricerca di una soluzione rapida?

Se stai cercando una soluzione rapida, c'è una grande collezione di temi e modelli Magento su Envato Market. È un ottimo modo per creare rapidamente una collezione di oggetti low poly di alta qualità per il tuo progetto.

È inoltre possibile ottenere assistenza personalizzata assumendo uno dei fornitori di servizi Magento su Envato Studio.

Ma, con il tutorial! In primo luogo, vedremo quali sono i file di layout e di blocco e come sono utili nel rendering delle pagine front-end in Magento, quindi vedremo come possiamo includerli nel nostro modulo personalizzato.

Qual è il file di layout?

Come suggerisce il nome, i file di layout sono utili per il rendering delle prime pagine di Magento. I file di layout sono file XML che si trovano in app> design> frontend> la tua interfaccia> il tuo tema> layout. Qui puoi vedere che ci sono molti file di layout per ogni dato modulo. Ogni modulo Magento ha i propri file di layout in modo molto simile al modulo del cliente customer.xmlfile di layout, modulo del catalogo hanno catalog.xmlfile di layout, ecc. Questi file di layout contengono blocchi strutturali e blocchi di contenuto.

Se ti stai chiedendo perché Magento ha bisogno di questi blocchi, puoi imparare di più su questo nella prima parte della serie.

Scaviamo di più nei file di layout

Scopriamo di più nei file di layout guardando un esempio. Vai a app> design> frontend> base> layoute apri il customer.xmlfile. Qui, tutti i blocchi sono avvolti attorno al main etichetta. Puoi vedere il diverso che contiene blocchi specifici.

Vedi il seguente frammento:

  Modulo di registrazione dell'account cliente          Campi modulo prima

Maniglia

I manici sono l'entità principale attraverso cui Magento identifica il blocco da caricare quando viene chiamato un particolare modulo. è l'handle specifico del modulo. Questo handle viene attivato quando qualcuno apre la pagina di registrazione del cliente.

Ciascuno gestisce il blocco nidificato contenuto specifico per la pagina. Alcuni dei file di layout contengono il maniglia. A questo punto, puoi chiedere la differenza tra gli handle specifici del modulo e gli handle predefiniti. In breve, le maniglie specifiche del modulo rendono solo i blocchi al suo interno quando il modulo viene sottoposto a rendering nel browser, mentre i comandi predefiniti gestiscono i carichi nella maggior parte della pagina.

All'interno dell'handle ci sono diversi blocchi diversi che specificano il file template da renderizzare quando viene chiamato quel blocco. I blocchi sono di due tipi:

Structurer Blocks
Blocchi di contenuti

Nel nostro file di layout stiamo definendo solo il Blocchi di contenutie poi li avvolgiamo in Structurer Blocks. Ad esempio, se qualcuno sta chiamando una pagina di registrazione del cliente e vogliamo caricarlo su sinistra, a destra, sul contenuto o sul piè di pagina, avvolgiamo quel blocco nel relativo blocco della struttura. Qui, abbiamo avvolto due blocchi all'interno del blocco "content" che è un blocco structurer.

I blocchi contengono attributi come i seguenti:

genere definisce le classi di blocchi in cui possiamo definire le diverse funzionalità
nome definisceil nome univoco di un blocco particolare in modo che gli altri blocchi possano fare un riferimento del blocco esistente per nome ed estenderlo
prima dopo sono attributi che possiamo impostare che ci permettono di definire la posizione del nostro blocco all'interno del blocco structurer
modello definisce il reale phtml nome del file e percorso dove va il nostro codice HTML e PHP
azione ci consente di attivare qualsiasi azione come il caricamento di JavaScript e tutto utilizzando questo attributo.
come è un attributo utilizzato principalmente per i blocchi structurer

Il il tag è usato per estendere i blocchi che esistono già. In questo caso, abbiamo esteso il blocco del contenuto e inserito il nostro blocco in esso. È necessario utilizzare il nome del blocco corretto che si desidera estendere.

Il il tag è usato per rimuovere il blocco specifico. Ad esempio, supponi che nella pagina di registrazione del tuo account tu non voglia visualizzare le colonne destra e sinistra. In tal caso, puoi semplicemente rimuovere quel blocco con la seguente sintassi .

Bambino

Quando avvolgi un blocco sotto un altro blocco, quel blocco avvolto viene chiamato blocco figlio. Ogni volta che il nostro blocco principale viene chiamato dal nostro modulo, viene automaticamente chiamato il blocco figlio.

Puoi chiamare separatamente anche il blocco figlio con la sintassi sottostante nel tuo file modello
echo $ this-> getChildHtml ('child');

radice

Aperto page.xmlfile di layout, troverai il blocco che appare sotto

Magento avvia il rendering dal blocco principale. Tutti gli altri blocchi sono blocchi figlio del blocco principale. Il blocco radice definisce la struttura della pagina. Qui, puoi vedere che attualmente è impostato su 3columns.phtml, puoi cambiarlo 1column.phtml, 2columns-right.phtml o 2columns-left.phtml.

Aggiunta di CSS e JavaScript all'XML layout

Per qualsiasi pagina specifica puoi aggiungere file CSS e JavaScript nel tag layout come questo:

  css / styles.css

Qui puoi vedere che abbiamo aggiunto un file CSS e un file JavaScript all'interno di capo della pagina del nostro account cliente.

Quali sono le classi di blocchi?

Le classi di blocchi vengono utilizzate per definire le funzioni specifiche per un determinato blocco. Il file delle classi di blocchi si trova in app> code> local / community / core> lo spazio dei nomi del tuo modulo> il nome del tuo modulo> Blockdirectory. Questi file contengono le funzioni che possiamo usare direttamente con $ questoparola chiave nel file modello specifico del blocco. Facciamo un esempio per capire le classi di blocchi.

Vai a review.xml file in cui risiede app> design> frontend> base> predefinito> layout directory e trova la seguente riga di codice:

Qui puoi vedere il blocco recensione / customer_recentche si riferiscono al modello recent.phtml. Vai a app> design> frontend> base> predefinito> modello> recensione> clientee aperto recent.phtml.

In questo file, puoi vedere due funzioni chiamate usando $ questo parola chiave. Loro sono $ This-> GetCollection () e $ This-> count (). Queste funzioni sono definite nel loro file delle classi di blocchi recent.php che risiede in app> code> core> Mage> review> Block> customerelenco.

Qui, il blocco type = "review / customer_recent" si riferisce a Mage_Review_Block_Customer_Recent classe di blocco definita in recent.php file. Qualunque funzione tu definisca in questa classe, puoi direttamente utilizzarla nel file modello corrispondente con $ questo.

Creazione di layout del modulo personalizzato e file bloccati

Infine, siamo rimasti con il modulo "Hello World" personalizzato con controller. Qui, creiamo il file di layout del nostro modulo personalizzato. Facciamolo crearlo.

Per creare il file di layout, dobbiamo prima creare il file della classe di blocchi. Prima di aggiungere il file di classe, dobbiamo dire al nostro modulo che stiamo includendo i file di blocco. Quindi vai app> codice> locale> Chiragdodia> Mymodule> etc>config.xmle aggiungi la seguente riga di codice:

    mymodule.xml         Chiragdodia_Mymodule_Block

Il file XML finale contiene le seguenti righe di codice:

    0.1.0       standard  Chiragdodia_Mymodule mymodule       mymodule.xml         Chiragdodia_Mymodule_Block

Creare il file di classe del blocco

Avanti, vai a app> codice> locale> Chiragdodia> Mymodule> Blocke crea il file Mymodule.phpche contiene sotto righe di codice

Qui abbiamo dichiarato la classe Chiragdodia_Mymodule_Block_Mymodule che contiene la funzione myfunction che possiamo chiamare direttamente dal nostro file modello di layout.

Creare il file XML di layout

Vai a app> design> frontend> default> default> layoute creare il mymodule.xml file che contiene sotto righe di codice

Crea il file modello

Vai a app> design> frontend> default> default> modelloe creare il mymodule.phtml file. In questo file, chiameremo la funzione myfunction che abbiamo dichiarato nella nostra classe di blocco.

myFunction (); ?>

Se tutto è corretto finora, vedrai l'output con layout a tre colonne accedendo all'URL yoursite.com/index.php/mymodule/index.

In alcune versioni di Magento, i temi predefiniti non contengono il layout e le directory dei modelli. In tal caso puoi creare il tuo layout e il tuo file modello in app> design> frontend> baseelenco.

Ecco come funzionano i layout in Magento. Nel precedente articolo, abbiamo creato il semplice modulo "Hello World", in questo articolo l'abbiamo creato utilizzando il file di layout. La struttura del layout di Magento è un po 'difficile da capire all'inizio, ma una volta che si inizia a lavorarci, si otterrà facilmente l'idea alla base.

In questo post, ho allegato i file demo del modulo che abbiamo creato fino ad ora. Sentiti libero di commentare e fare tutte le domande che potresti avere su questo particolare problema.

Codice