How to add Product Images To Your magento Navigation Menu

How to add Product Images To Your magento Navigation Menu? Recently, we had a request to add product images to the navigation menu for a client. We found a pretty neat solution which maintains itself well and can be seen in action here. This feature is asked by many magento users, so we decide to write a tutorial on this.

As standard, Magento comes with a navigation menu which pulls in all of your categories and subcategories. The issue with this is that changing it means editing the Magento core files fairly extensively which as you may or not have experienced, can often lead to issues when upgrading.

We initially started by pulling in the all the ‘active’ categories and subcategories inapp/design/frontend/yourtheme/yoursubtheme/template/catalog/category/list.phtml.

1. <?php $_helper = Mage::helper(‘catalog/category’) ?>
2. <?php $_categories = $_helper->getStoreCategories() ?>
3. <?php $currentCategory = Mage::registry(‘current_category’) ?>
4. <?php if (count($_categories) > 0): ?>
5.     <ul id=“nav”>
6.         <?php foreach($_categories as $_category): ?>
7.             <li>
8.                 <a href=”<?php echo $_helper->getCategoryUrl($_category) ?>“>
9.                        <span>
10.                     <?php echo $_category->getName() ?>
11.                     </span>
12.                 </a>
13.                 <?php $_category = Mage::getModel(‘catalog/category’)->load($_category->getId()) ?>
14.                 <?php $_subcategories = $_category->getChildrenCategories() ?>
15.                 <?php if (count($_subcategories) > 0): ?>
16.                     <ul class=“sub”>
17.                         <?php foreach($_subcategories as $_subcategory):
19.                         $products = Mage::getResourceModel(‘catalog/product_collection’)->addCategoryFilter($_subcategory)->addAttributeToSelect(‘small_image’);
20.                         $products->getSelect()->order(new Zend_Db_Expr(‘RAND()’))->limit(1);
21.                         $products->load();?>
22.                             <li>
23.                                 <a href=”<?php echo $_helper->getCategoryUrl($_subcategory) ?>“>
24.                                     <span>
25.                                         <?php echo $_subcategory->getName() ?>
26.                                     </span>
27.                                     <?php foreach($products as $product) { ?>
28.                                     <img src=”<?php echo $this->helper(‘catalog/image’)->init($product, ‘small_image’)->resize(150, 150); ?>“ width=”150″ height=”150″ alt=”<?php echo $_subcategory->getName() ?>“ />
29.                                     <?php break; } ?>
30.                                 </a>
31.                             </li>
32.                         <?php endforeach; ?>
33.                     </ul>
34.                 <?php endif; ?>
35.             </li>
36.         <?php endforeach; ?>
37.     </ul>
38. <?php endif; ?>

So at this point, we have all the categories and subcategories of magento with images on the sub-cats. The script takes a random image from each category and then takes that products image. How about a bit of style then? Ok, so we only want to see the image of the sub-category that we’re hovering over right? This style snippet should soon sort that out:

1. #nav ul li a img { display:none; position:absolute; right:30px; top:0px; }

1. var $j = jQuery.noConflict();
2. $j(document).ready(function(){
3. $j(‘#nav .sub li’).each(function() {
4. $j(‘a’, this).hover(function() {
5. $j(‘img’, this).fadeIn();
6. }, function() {
7. $j(‘img’, this).fadeOut();
8. });
9. });
10. });

Done! You should have a fully working navigation menu with product images.

You may also try this Magento Mega Menu extension to generate a professional looking Magento Navigation Menu

http://www.magestore.com/magento-mega-menu-extension.html