Web Chief

+(44) 08448 262 595    info@webchief.co.uk

Online Marketing hints & tips

Articles

Listing sub-categories on a category page in Magento

In this tutorial I'm going to show you how to display a list of sub categories on a category page in Magento.

Lets say we have a category with lots of sub categories; if we could show these to our users then they might have an easier time finding what they're looking for. We can achieve this with a simple bit of code.

First create a new phtml file and save it in your /app/design/frontend/default/yourTheme/template/catalog/category folder.

How will our code work?

When writing a new piece of code its always a good idea to have a think and write down in words exactly what you're going to do. In this case we're going to find the id of the category we're looking at, then we're going to find the sub-categories associated with that id, and then we're going to display the relevant information for each of those subcategories.

So first we have to find the category id for the page we're looking at. (This code will only be called when we're on a category page). We find the id with the following code:

//get the current category
$_cat = new Mage_Catalog_Block_Navigation();
$currentCat = $_cat->getCurrentCategory();

    	

This gives us the current category, in the next step we'll use its id to find the sub categories (children) associated with it.

//get the children of the current category
$subCats = Mage::getModel('catalog/category')
              ->load($currentCat->getId())->getChildren();

    	

Again, notice that the sub menu unordered lists have their visibility set to hidden. This also means that the list will degrade gracefully, if the user doesn't have javascript available on their browser the sub menus will not display.

Lets start adding the jQuery to make pour dropdown menu work. The first thing we have to do is download jquery if we haven't already got it and include it on our page. Add the following to the head of your document making sure that you get the path top the file correct:

<script type="text/javascript" src="jquery.js"></script>
    	

$subCats now contains a comma separated list of the ids of the sub categories. We need to get rid of the commas:

//get sub category ids
$subCatIds = explode(',',$subCats);
    	

Sweet, so now all we have to do is create an object for each id and output the info that we want using the functions already available in Magento. In this case I'm using an unordered list but you can use whatever you want.

<?php if (count($subCatIds) > 1): ?>
 <ul>
  <?php foreach($subCatIds as $subCatId): ?>
   <?php $subCat = Mage::getModel('catalog/category')->load($subCatId); ?>
	<?php if($subCat->getIsActive()): ?>
	 <li>
      <?php //display category image
	  if($subCat->getImageUrl()): ?>
	   <img src="<?php echo $subCat->getImageUrl(); ?>" />
	  <?php endif; ?>
	  <a href="<?php echo $subCat->getUrl(); ?>">
	  <?php echo $subCat->getName(); ?>
	  </a>
	 </li>
	<?php endif; ?>
   <?php endforeach; ?>
  </ul>
<?php endif; ?>
			

Notice that it only displays sub-categories that are set to active.

And that's it. The complete code is as follows:

<?php 
//get the current category
$_cat = new Mage_Catalog_Block_Navigation();
$currentCat = $_cat->getCurrentCategory();

//get the children of the current category
$subCats = Mage::getModel('catalog/category')->load($currentCat->getId())->getChildren();

//get sub category ids
$subCatIds = explode(',',$subCats);
?>

<?php if (count($subCatIds) > 1): ?>
 <ul>
  <?php foreach($subCatIds as $subCatId): ?>
   <?php $subCat = Mage::getModel('catalog/category')->load($subCatId); ?>
   <?php if($subCat->getIsActive()): ?>
	<li>
	 <?php //display category image
	 if($subCat->getImageUrl()): ?>
	  <img src="<?php echo $subCat->getImageUrl(); ?>" />
	 <?php endif; ?>
	 <a href="<?php echo $subCat->getUrl(); ?>">
	 <?php echo $subCat->getName(); ?>
	 </a>
	</li>
   <?php endif; ?>
  <?php endforeach; ?>
 </ul>
<?php endif; ?>

You can call this from your layout xml file or static block as usual. Alternatively you can just paste this code straight into the file that creates your category pages. All you have to do now is style the list!

Hopefully this has saved you some time searching around for the solution to this problem.

If you liked this tutorial why not follow me on twitter? I normally only tweet when I have new tuts or sites out so you won't get bombarded with a load of rubbish - I promise!

Thanks!

back to articles

an amazing body of work

view portfolio