Friday 18 May 2012

Magento: Create Category List with Images

Magento: Create Category List with Images

The code to create a list of top-level categories along with their images:
<?php $_categories = $this->getStoreCategories() ?>
<?php $count = 0 ?>
<ul id="square-category">
<?php foreach ($_categories as $_category): ?>

<?php $open = $this->isCategoryActive($_category); ?>
<?php
$cur_category=Mage::getModel('catalog/category')->load($_category->getId());
$layer = Mage::getSingleton('catalog/layer');
$layer->setCurrentCategory($cur_category);
$immagine = $this->getCurrentCategory()->getThumbnail()
?>

<?php $count = $count+1 ?>
    <li class="Pos<?php echo $count ?>">
        <a href="<?php echo $this->getCategoryUrl($_category) ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
            <img src="/media/catalog/category/<?php echo "$immagine" ?>" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" class="category-img" />
            <span><?php echo $this->htmlEscape($_category->getName()) ?></span>
        </a>
    </li>
<?php endforeach; ?>
</ul>

2 comments:

  1. hi! can you explain what file i have to modify? thanks a lot

    ReplyDelete
  2. Hey,

    You will need to create a .phtml file called image-nav.phtml here:
    app/design/frontend/default//template/catalog/navigation

    And then reference it using xml in the page.xml or catalog.xml located here:
    app/design/frontend/default//layout

    Using the instructions here:
    http://genius-moments.blogspot.co.uk/2011/08/magento-referencing-phtml-file-in-cms.html
    for xml and php method, NOT the just php call or the CMS method.

    ReplyDelete