Subcategories Within Categories

**** THIS TUTORIAL HAS BEEN UPDATED FOR 1.4.1.1 – CLICK HERE ****

I did a tutorial ages ago about how to import the subcategories of a product within another category via a static block. The details were shady and the logic was sketchy in those days, now I can look upon it with a sense of absolute knowledge and appreciation. Before digressing uncontrollably, let me get straight to the point.

1. Create a page called subcategory.phtml in the following folder: app/design/frontend/base/default/template/catalog/navigation/ and use the following code:

<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<?php if($_category->getIsActive()): ?>
<a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) ?></a>
<?php endif; ?>
<?php endforeach; ?>

This is the code represented as simply as possible, it will produce a list of links that are contained within that category, you’re free to style this as you wish.

2. Create a static block called Subcategories and enter the following code into the content:

{{block type="catalog/navigation"  template="catalog/navigation/subcategory.phtml"}}

3. Now go to the category which you’d like to use to show the subcategories and ensure that it is not set as an anchor. In the Display options tab, set it to show as ‘Static Block Only’ and choose the block ‘Subcategories’.

Add Subcategory Image

If you want to take it one step further and show the image of the subcategory to make it more visual, you need to make a simple hack and add a bit of code to the original code in subcategory.phtml.

1. Firstly open app\code\core\Mage\Catalog\Block\Navigation.php, copy all the contents and create a new file locally. So that would be: app\code\local\Mage\Catalog\Block\Navigation.php

2. Look for a function on line 93 called getCurrentChildCategories() and comment out the function, replacing it with the following:

$layer = Mage::getSingleton('catalog/layer');
$category   = $layer->getCurrentCategory();
/* @var $category Mage_Catalog_Model_Category */
$collection = Mage::getModel('catalog/category')->getCollection();
/* @var $collection Mage_Catalog_Model_Resource_Eav_Mysql4_Category_Collection */
$collection->addAttributeToSelect('url_key')
->addAttributeToSelect('name')
->addAttributeToSelect('is_anchor')
->addAttributeToSelect('image')
->addAttributeToFilter('is_active', 1)
->addIdFilter($category->getChildren())
->setOrder('position', 'ASC')
->joinUrlRewrite()
->load();

$productCollection = Mage::getResourceModel('catalog/product_collection');
$layer->prepareProductCollection($productCollection);
$productCollection->addCountToCategories($collection);
return $collection;

Save and upload this file. When a local file is uploaded, it is used instead of the core file.

3. Enter the following code into the subcategory.phtml file that we created in the first part of the tutorial. Make sure it occurs within the foreach statement and inside the getIsActive() check:

<img src="<?php echo $_category->getImageUrl() ?>" width="90" height="90" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />

You can now visually display your category’s subcategories in a very simple way. Keep checking back for more of our Magento Tutorials here at Ecommerce Web Design.

**** THIS TUTORIAL HAS BEEN UPDATED FOR 1.4.1.1 – CLICK HERE ****

Adam Moss Author Page

• Displaying Subcategories with Images in 1.4.1.1
• Google Product Categories (Google Base)
• Retrieve Categories / Subcategories