Per prima cosa create un file di template es: “vert_nav.phtml” per la navigazione in /app/design/frontend/tua_interfaccia/tuo_tema/template/catalog/navigation/
<div class="vertical-nav-container box base-mini">
<div id="vertical-nav">
<div class="head">
<h4><?php echo $this->__('Categories') ?></h4>
</div>
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php $open = $this->isCategoryActive($_category); ?>
<?php $potential = $_category->hasChildren(); ?>
<li><a href="<?php echo $this->getCategoryUrl($_category); ?>"<?php if($open) { echo ' class="open"'; } ?><?php if($potential) { echo ' class="potential"'; } ?> ><?php echo $_category->getName();?></a>
<?php if ($open && $potential): ?>
<ul>
<?php foreach ($_category->getChildren() as $subcategory): ?>
<?php $subCat = Mage::getModel('catalog/category')->load($subcategory); ?>
<?php $open = $this->isCategoryActive($subCat); ?>
<?php $potential = $subCat->hasChildren(); ?>
<li><a href="<?php echo $this->getCategoryUrl($subCat); ?>"<?php if($open) { echo ' class="subopen"'; } ?><?php if($potential) { echo ' class="potential"'; } ?><?php if(!$potential&&$open) { echo ' class="final"'; } ?> ><?php echo $subCat->getName(); ?></a>
<?php if ($open && $potential): ?>
<ul>
<?php foreach ($subcategory->getChildren() as $subsubcategory): ?>
<?php $subsubCat = Mage::getModel('catalog/category')->load($subsubcategory); ?>
<?php $open = $this->isCategoryActive($subsubCat) ?>
<li><a href="<?php echo $this->getCategoryUrl($subsubCat); ?>" <?php if($open) { echo ' class="final"'; } ?>><?php echo $subsubCat->getName(); ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<li class="separator"> </li>
<?php endforeach ?>
</ul>
</div>
</div>Poi definisci un nuovo blocco in /app/design/frontend/your_interface/your_theme/layout/catalog.xml in modo tale che punti sul tuo nuovo file. se aggiungi il blocco in “default”, sarà sempre visibile anche nella Home Page. Ti servirà inserire queste righe nella sezione con “reference name=’left’”, altrimenti il sistema di template non saprà dove visualizzare il blocco.
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" />
Con queste modifiche funzionerebbe già tutto, ma se vogliamo dare una apparenza grafica presentabile dobbiamo modificare il file /skin/frontend/tua_interfaccia/tuo_tema/css/menu.css per esempio come segue:
/***************VERTICAL**********************/ /*****ALL*****/ #vertical-nav { padding-bottom:20px; } #vertical-nav .separator { list-style-image: none; line-height:3px; font-size:1px; margin:0 15px 0 15px; background:url(../images/vertnav_background.png) no-repeat center; } #vertical-nav ul { padding:0; margin:0; font-size:11px; list-style-type: none; } #vertical-nav ul li { margin: 0; padding: 0; display:block; margin-top: 1px; } #vertical-nav ul ul li a,#vertical-nav ul li{ } #vertical-nav ul li a { padding: 1px 15px 1px 15px; margin:0; text-decoration: none; line-height:1.3em; } #vertical-nav ul li .open, #vertical-nav .activesubsub, #vertical-nav .subopen { color:#000000; } #vertical-nav .final{ background-color:#ECECEC; } #vertical-nav ul ul li a { margin-left: 20px; } #vertical-nav ul ul ul li a { margin-left: 40px; } #vertical-nav a { color:#000; } #vertical-nav a:hover { color:#ff0000; } #vertical-nav ul li ul li a { margin-bottom:0px; margin-top:0px; font-size:11px; } #vertical-nav ul li ul li { margin-bottom:0px; margin-top:0px; font-size:11px; }
