Come creare un elenco o griglia delle categorie con immagini

Per prima cosa cercare il percorso:

app/design/frontend/default/TU_TEMPLATE/catalog/navigation

in questo percorso, creiamo un file chiamato “category_listing.phtml” senza le virgolette ovviamente.

Questo file avrà il seguente codice:

<?php $_maincategorylisting=$this->getCurrentCategory()?>
<?php $_categories=$this->getCurrentChildCategories()?>
<h2><?php echo $this->__(‘Browse Products’) ?> </h2>
<div class=“subcat-listing”>
<ul class=“subcat-products”>
<? foreach ($_categories as $_category):?>
<? if($_category->getIsActive()): ?>
<?php $cur_category=Mage::getModel(‘catalog/category’)->load($_category->getId()); ?>
<?php $layer = Mage::getSingleton(‘catalog/layer’); ?>
<?php $layer->setCurrentCategory($cur_category); ?>
<? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
<li> <a href=“<?php echo $this->getCategoryUrl($_category) ?>” title=“<?php echo $this->htmlEscape($_category->getName()) ?>”>
<img src=“<?php echo $_imageUrl ?>” width=“auto” alt=“<?php echo $this->htmlEscape($_category->getName()) ?>” />
</a>
<h3><?php echo $this->htmlEscape($_category->getName()) ?></h3>
<? if($_description=$this->getCurrentCategory()->getDescription()):?>
<p class=“category-description”>
<?php echo $_description ?></</p>
<?php endif; ?>
<? endif; ?>
<? endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php $layer->setCurrentCategory($_maincategorylisting); ?>

A questo punto andare sul pannello di amministrazione di Magento.

Vai al menu “CMS / block Static” e cliccare su “crea nuovo blocco“.

Chiamiamo lo stesso blocco allo stesso modo del file  “category Listing” e identificativo “category_listing”. Nel contenuto del blocco inserire il codice seguente:

{{block type=”catalog/navigation” name=”catalog.categories” template=”catalog/navigation/category_listing.phtml”}}

Ora salvate il nuovo blocco, e andare al menu “Catalogo / Gestione Categorie“.

Ora cerchiamo la categoria che vogliamo visualizzare con le immagini. Selezionare la categoria che si desidera, e nella scheda Display Settings impostiamo come segue:

DISPLAY MODE: Static Block

CMS Block: Category Listing (il blocco che abbiamo creato prima)

Anchor: NO

Salvere ed ora per visualizzare la categoria così come è stata personalizzata andare sul frontend del sito.