Magento: Custom Category Images Listing Block Tutorial
12 November
Posted by Jake Rutter
Magento, Open Source, PHP, Web
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 class="col_full">
-
-
-
<div class="listing">
-
<?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 class="category-box">
-
<div class="category-image-box">
-
<a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif"></a>
-
</div>
-
<div class="category-name">
-
<p><a href="<?php echo $this->getCategoryUrl($_category)?>">
-
</div>
-
</div>
-
-
<?endif?>
-
-
<? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
-
-
<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 class="category-name">
-
<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!
Tim Pearson
There is a bit of a inconsistency between filenames used above, sub_navigation.html should be sub_category_listing.phtml
Regards
Tim Pearson
Daniel
Very nice work you did there!!
Maugan
Thanks for the post, a great help.
One suggested modification on line 24. use the getSkinUrl() instead of the hard coded path.
<img src=”getSkinUrl() ?>images/category_image_default.gif” alt=”[Image] No image available”>
Chris
I spent quite a bit of time searching the Magento Site for something even remotly similar with very little luck. This is perfect and exactly what (should be built into Magento) I need!
Thank you so much!!
Graeme
Fantastic - I echo Chris’ comments above - this is just one of those things that Magento is missing. I hit a snag with coding the Static Block as I had installed the Fontis WYSIWYG - this would not add the code properly for the static block - thankfully it can be just as easily uninstalled using the Magento Connect manager.
Thank you - first class work
Alex Chudnovsky
Excellent tutorial, thank you for sharing your knowledge
Cheers,
Alex