Se già conosci un pò Magento, saprai sicuramente che è completamente modulare e ciò consente di avere una grande scalabilità e flessibilità per il tuo negozio.
Mentre si sviluppa un template per Magento, ci si trova di fronte a molti blocchi che puoi inserire in dei blocchi strutturali. Se non sai cosa sono, ti consiglio di leggere la Guida al design per Magento (in inglese). Sfortunatamente però Magento offre solo pochi blocchi strutturali (header, footer, colonna principale e sidebar…). Con questo Magento tutorial sarai in grado di inserire nel tuo tema per Magento un nuovo blocco strutturale.
Cosa sono i blocchi di struttura?
Sono dei blocchi “contenitori” che ti permettono di “ospitare” al loro interno dei blocchi dove può essere inserito del testo, delle immagini o altro.
I blocchi strutturali di default (vedi immagine sotto) sono i blocchi principali del template di Magento quindi header, footer, sidebar destra e sinistra, e la colonna principale che servono a creare lo scheletro del tuo negozio.
Step 1: Crea il nuovo blocco “reference”!
Crea un file chiamato local.xml nella cartella layout del tuo tema e all’interno inserisci questo codice:
<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <reference name="root"> <block type="core/text_list" name="newreference" as="newreference" translate="label"> <label>New Reference</label> </block> </reference> </default> </layout>
Step 2: Stabilisci dove inserire il nuovo blocco struttura
Ora che abbiamo creato il blocco strutturale, dobbiamo comunicare a magento in quale posizione lo vogliamo avere. Andiamo nella cartella template/page del tuo tema dove troverai diversi files dello scheletro del negozio (1column.phtml, 2columns-left.phtml … ). Se vogliamo che il blocco sia visibile solo nel layout a 2 colonne con la sidebar destra, apriamo il file 2columns-right.phtml e posizioniamo il codice che segue nel punto esatto in cui vogliamo visualizzare il bocco:
<div><?php echo $this->getChildHtml(‘newreference’) ?></div>
Per esempio se vogliamo inserirlo prima del footer sarà sufficiente scriverlo così:<div class=”main-container col2-right-layout”>
<div class="main"> <?php echo $this->getChildHtml(‘breadcrumbs’) ?> <div class="col-main"> <?php echo $this->getChildHtml(‘global_messages’) ?> <?php echo $this->getChildHtml(‘content’) ?> </div> <div class="col-right sidebar"><?php echo $this->getChildHtml(‘right’) ?></div> </div> <div><?php echo $this->getChildHtml(‘newreference’) ?></div> </div>
Step 3: Inseriamo del contenuto nel nuovo blocco creato
Ora che abbiamo definito il blocco e detto a Magento dove mostrarlo, dobbimao riempirlo con del contenuto.
Possiamo riempire il blocco con qualsiasi cosa, testo, immagini, blocchi di Magento, blocchi CMS.
Quindi creiamo un nuovo file app/design/frontend/[base]/[default]/template/newreference.phtml con il del testo:
<h1 style="background-color:yellow">Hello New Reference!</h1>
Step 4: Inseriamo il nuvo file creato nel blocco struttura
Ora torna al file local.xml e aggiungi il nuovo file creato all’interno della referenza creata al punto 1. Di seguito trovi il codice completo del file local.xml
<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <reference name="root"> <block type="core/text_list" name="newreference" as="newreference" translate="label"> <label>New Reference</label> </block> </reference> <reference name="newreference"> <block type="core/template" name="newreferenceblock" template="newreference.phtml" /> </reference> </default> </layout>
Ora se visiti il tuo sito vedrai qualcosa del genere:
Tutto qui! Spero possa aiutare qualcuno!
Link all’articolo originale: Inchoo