List the child categories in block format on CMS page and Category page

Often there is a need to display child categories as a block on Different pages of website.

I have wrote a code on how to display all child categories along with their category thumbnail image as a block on parent category page.

What we will do is, we will first get the current category id and then will retrieve all its child categories.

First review the code, later i’ll provide you the explanation for it. Here i am pasting the code with whole HTML structure, so it will be easier for you to make the block structure. You will just need to write CSS, at which i am very weak 😉

<div>
<div>
<?php $_helper = $this->helper(‘catalog/output’);
$_categories=$this->getCurrentChildCategories();
foreach ($_categories as $_category):
if($_category->getIsActive()):
$cur_category = Mage::getModel(‘catalog/category’)->load($_category->getId());
?><div>
<div>
<a href=”<?php echo $this->getCategoryUrl($cur_category) ?>”>            <?php if ($_imgUrl = $cur_category->getThumbnail()){
?><img src=”<?php echo Mage::getBaseUrl(‘media’).’catalog/category/’.$_imgUrl; ?>” alt=”<?php echo $_helper->categoryAttribute($cur_category, $cur_category->getName(), ‘name’);?>” title=”<?php echo $_helper->categoryAttribute($cur_category, $cur_category->getName(), ‘name’);?>”/><?php
} else{
?><img src=”<? echo $this->getSkinUrl(‘images/catalog/product/placeholder/cat_thumb.gif’)?>” height=”177px” width=”308px” alt=”<?php echo $_helper->categoryAttribute($cur_category, $cur_category->getName(), ‘name’);?>” title=”<?php echo $_helper->categoryAttribute($cur_category, $cur_category->getName(), ‘name’);?>”/><?php
}?>
</a>
</div>
<a href=”<?php echo $this->getCategoryUrl($cur_category) ?>”>
<?php echo $_helper->categoryAttribute($cur_category, $cur_category->getName(), ‘name’); ?>
</a>
</div>
<?php endif;
endforeach; ?> </div>
</div>

Now, I’ll explain you the major parts of code.

1) $_helper = $this->helper(‘catalog/output’) : This helper is used to access the helper file of catalog which contains many useful methods.
2) $_categories=$this->getCurrentChildCategories() : Gets the array of all child category of current category.
3) Mage::getModel(‘catalog/category’)->load($_category->getId()) : Loads the current category in foreach loop so information of that category can be retrieved.
4) $this->getCategoryUrl($cur_category) : Gets the URL of the category
5) $cur_category->getThumbnail() : Gets the image URL of the current category thumbnail image.
6) $_helper->categoryAttribute($cur_category, $cur_category->getName(), ‘name’) : Gets the name of the category

Next question is where should the file be saved and how can it be called.

Save this file suppose category_list.phtml at app/design/frontend/YOURTHEME/catalog/navigation/category_list.phtml.

You can call this file in two ways.
1) To call it in xml file use following code

<reference name=”content”>
<block type=”catalog/navigation” template=”catalog/navigation/category_list.phtml” name=”category_list” title=”Brands”/>
</reference>

2) To call it in CMS page use following code snippet

{{ block type=”catalog/navigation” template=”catalog/navigation/category_list.phtml” name=”category_list” title=”Brands”}}

Please add your suggestion and feedback in comment section

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s