Installazione estensione:
Per prima cosa occorre installare l'estensione VertNav (link) ed assicurarsi che il nostro template preveda la colonna sinistra (3 columns è il template consigliato). L'installazione provvederà a creare (di default) un blocco sul lato sinistro.
Configurazione:
L'unica opzione a disposizione nel back-end è la possibilità di visualizzare il numero dei prodotti presenti nella categoria. Per fare questo, seguire il percorso: System -> Configuration -> Catalog -> Category Vertical Navigation.
Modifiche interne:
Ulteriori modifiche sono possibili modificando il codice relativo nei file costruttori. In particolare è modificabile il layout attraverso interventi sul file /app/design/frontend/default/default/layout/vertnav.xml. Per quanto riguarda invece il template, si tratta del percorso: /app/design/frontend/default/default/template/vertnav/left.phtml. Per ottenere un menù javascript è consigliabile utilizzare la libreria Prototype, già inclusa di default nel pacchetto Magento; oppure integrare jQuery (seguendo la guida già presente su questo sito) ed ottenere un qualsiasi effetto grafico gradito.
Per quanto riguarda il file XML, esso specifica prevalentemente 3 settaggi:
- Caricamento css: attraverso il comando: <action method="addItem"><type>skin_css</type><name>css/vertnav.css</name></action>, carico l'apposito CSS, che viene automaticamente installato nel percorso skin/frontend/default/default/css/vertnav.css;
- Lato di visualizzazione: cioè in quale lato inserire il menù; modificando il tag <reference name="left"> ... </reference> in <reference name="right"> ... </reference> otteniamo lo spostamento nella colonna destra del blocco;
- Pagine interessate: ogni blocco è posto all'interno del tag reference appena trattato che a sua volta è contenuto all'interno di tag da nomi evocativi: questi corrispondono ai tipi di pagine in cui il blocco verrà mostrato. Tutti i tipi di pagina presenti qui visualizzeranno il blocco, viceversa le altre non lo faranno. Il blocco, se inserito all'interno del tag <default>, sarà visibile ovunque. Essendo questa estensione nata per sostituire il menù di base di magento presente subito dopo l'intestazione, è presente il codice per eliminare quest'ultimo:
<reference name="top.menu"> <remove name="catalog.topnav"/> </reference>
