Home Magento Customization, Magento Guide

Custom Category Images Listing Block Tutorial

23 July 2009 2 Comments

Recently, I just finished coding out a website for a client in Magento. You can view the site at www.3graces.com, it was a full switch from some old legacy asp shopping cart to Magento. Im really happy with the way things turned out and the client is too, Magento just has so many wonderful features built-in.

One feature that I found wasn’t built in was a way to display each sub-category with an image, and its name on a landing page. Magento has a nice feature which allows you to assign an image to a category, but doesnt give you a way to make that show up in a listing somewhere.

I setup 6 main categories, with each having multiple sub-categories and I wanted to have a way to show all those sub-categories to the user on a nice page that was pleasing to the eye. Here is an example: Payot Paris by Category.

To achieve this layout, I created a block called sub_navigation.html and placed it in the following directory: app/design/frontend/3graces/default/template/catalog/navigaton/sub_navigation.html

<div id="categories">
<div>

<div >
<?php $_maincategorylisting=$this->getCurrentCategory()?>
<?php $_categories=$this->getCurrentChildCategories()?>

<?php if($_categories->count()):?>
<? foreach ($_categories as $_category):?>

<? if($_category->getIsActive()):

$cur_category=Mage::getModel('catalog/category')->load($_category->getId());
$layer = Mage::getSingleton('catalog/layer');
$layer->setCurrentCategory($cur_category);

$catName = $this->getCurrentCategory()->getName();

if($_imageUrl=!$this->getCurrentCategory()->getImageUrl()):?>

<div>
<div>
<a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif"></a>
</div>
<div>
<p><a href="<?php echo $this->getCategoryUrl($_category)?>">
<?php echo $catName ?></a></p>
</div>
</div>

<?endif?>

<? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>

<div>
<div>
<a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="<?php echo $_imageUrl?>" height="80"></a>
</div>
<div>
<p><a href="<?php echo $this->getCategoryUrl($_category)?>"> <?php echo $_category->getName()?></a></p>
</div>
</div>

<?
endif;
endif;?>
<?endforeach?>

<?php /* This resets the category back to the original pages category
****     If this is not done, subsequent calls on the same page will use the last category
****    in the foreach loop
*/   ?>
<?php $layer->setCurrentCategory($_maincategorylisting);  ?>
<?endif;?>

</div>
<br clear=all>
</div>
</div>

If you notice, I placed an if statement in the code that first checks if an image has been set for the category. If one has, it will show it – if there isn’t an image it will show a default image that I have chosen. Here is an example, when only 1 image for a category has been setup, and the rest are the default.

To make the block show up as an option in Magento Admin, you will need to go to CMS > Static Blocks. Once you get there, click Add New Block and fill in the following fields.

Block Title: Sub Category Listing
Identifier: sub_category_listing
Status: Enabled
Content: {{block type=”catalog/navigation” template=”catalog/navigation/sub_category_listing.phtml”}}

Once you have added all those fields, you can click save. Now to enable this static block for a parent category that contains a bunch of sub-categories with images that are set.
Go to: Catalog > Manage Categories

Then click on the parent category to which you wish to add this layout, scroll to the bottom of the first tab “General Information”.

You will see the following fields, just setup as follows:

Display Mode: Static Block Only
CMS Block: Sub Category Listing
Is Anchor: Yes

Now if you go back to your category on the website, you should see your newly setup sub category image listing page. If you arent seeing any images, make sure you setup you default image and placed it in the current directory within your magento install.

Thanks!

From Onerutter.com