SJL Web Design

Magento: Subcategories inside Parent Category

In this tutorial I will be explaining how to display subcategory thumbnails within a parent category. This will allow your visitors to narrow down their search accordingly as opposed to being overloaded with all of the products from within a parent category at once, like Magento does by default.

An Example of Subcategories within a Parent Category

Create the Subcategory Template

Firstly we are going to need to create a new template called sub-categories.phtml and save it to the following directory:

app/design/frontend/default/template-name/catalog/navigaton/sub-categories.phtml

Now open the sub-category.phtml template and paste the following block of code inside it:

<div id="categories">
 <?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()):
 ?>
 <?php /* Default subcategory jpg if no image exists */ ?>
 <div class="category-box">
 <div class="category-image-box">
 <a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="<?php echo $this->getSkinUrl('images/subcategory-default.jpg') ?>"></a> </div>
 <div>
 <p><a href="<?php echo $this->getCategoryUrl($_category)?>"> <?php echo $catName ?></a></p>
 </div>
 </div>
 <? endif ?>
 <? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
 <?php /* Displays the subcategory image */ ?>
 <div class="category-box">
 <div class="category-image-box">
 <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 $layer->setCurrentCategory($_maincategorylisting);  ?>
 <? endif; ?>
</div>

I have wrapped some of the code in div classes, feel free to style or change these as you wish.

As a basic overview this code will check whether an image has been assigned to a category and if it hasn’t it will load a default image stored within your theme folder. For that reason it would be a good idea for you to update the image link within the code (images/subcategory-default.jpg) to point towards a image suited to your store.

The code will also check how many subcategories exist and if there is only one it will automatically pull the products from within that subcategory, like Magento does usually.

Create the Static Block

Once you have uploaded this file we are going to need to create a static block in the Magento admin area by going to CMS > Static Blocks and clicking the ‘Add New Block’ button in the top right of the screen.

Then enter the following into the input fields and click save:

Block Title: Sub Categories
Identifier: sub_categories
Status: Enabled
Content:

{{block type="catalog/navigation" template="catalog/navigation/sub-categories.phtml"}}

Assign the Static Block to Parent Category

Now for the last step you will need to assign this static block to the parent category that you are wanting to display the subcategories on. To do this go to Catalog > Manage Categories and click on the desired category from the left navigation. Switch from the ‘General Information’ tab at the top to the ‘Display Settings’ and switch the following drop downs to:

Display Mode: Static Block Only
CMS Block: Sub Categories
Is Anchor: Yes

Click ‘Save Category’ and switch to the newly edited category on your website, with a little CSS it should now be displaying you subcategories in all their glory.

2 Responses to “Magento: Subcategories inside Parent Category”

Jan Says:

I followed your tutorial.. bear in mind im new to magento so its most likely my fault. But its just showing the products from the sub categories underneath my static block.. rather than the sub categories.. the subcategories do have pictures i checked.

Is there anything else i should check up on?

Steve Says:

Thanks for this code!

I’m in the process of building a magento store and had been looking for some way to do exactly this.

Works perfectly with magento 1.4.1

Keep up the good work.

Leave a Reply