Magento Menu Customization with Product List

February 3, 2009 00:02 by admin

Magento main menu is construed based on the hierarchy like,

 Root Category → Category → Sub-Category

We will customise the menu to show the Products of a category/su-bcategory along with its hierarchy in dropdown menu as seen below.

    

This is a good feature if you have less products in a website.

In order to implement the above structure, we need to modify the navigation.php file of drawItem() function like below. The navigation.php is available in the following location,

app/code/core/Mage/Catalog/Block/Navigation.php

The code is,

Public function drawItem($category, $level=0, $last=false){
 $html = '';
 if (!$category->getIsActive()) {
  return $html;
 }
 $children = $category->getChildren();
 $hasChildren = $children && $children->count();
 /***** Getting Product List Start ******/
 $cur_category = Mage::getModel('catalog/category')->load($category->getId());
 $_productCollection = Mage::getResourceModel('catalog/product_collection')->addCategoryFilter($cur_category)->setOrder('position', 'ASC');
 $cnt=1;
 $hasProduct1=$_productCollection->count();
 $phtmlChildren='';
 if($hasProduct1>=1){
  $l=$level+1;
  foreach ($_productCollection AS $_product){
   $cur_product = Mage::getModel('catalog/product')->load($_product->getId());
   if ($cur_product->getStatus()){
    $phtmlChildren.= '<li';
    if($cnt==$hasProduct1) {
     $phtmlChildren.= ' class="level'.$l;
     $phtmlChildren.= ' nav-'.$this->htmlEscape($cur_product->getName()).' last';
    }
    else {
     $phtmlChildren.= ' class="level'.$l;
     $phtmlChildren.= ' nav-'.$this->htmlEscape($cur_product->getName());
    }
    $phtmlChildren.= '">'."\n";
    $phtmlChildren.= ' <a href="/'.$cur_product->getUrlPath() . '.html">'. $this->htmlEscape($cur_product->getName()) . '</a>'."\n";
    $phtmlChildren.= '</li>';
    $cnt=$cnt+1;
   }
  }
 }
 /***** Getting Product List End ******/
 $html.= '<li';
 if ($hasChildren || (!empty($phtmlChildren)))
  $html.= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"';
 $html.= ' class="level'.$level;
 $html.= ' nav-'.str_replace('/', '-', $category->getRequestPath());
 if ($this->isCategoryActive($category))
  $html.= ' active';
 if ($last)
  $html .= ' last';
 if ($hasChildren || (!empty($phtmlChildren))) {
  $cnt = 0;
  foreach ($children as $child)
   if ($child->getIsActive())
    $cnt++;
  $html .= ' parent';
 }
 $html.= '">'."\n";
 $html.= '<a href="'.$this->getCategoryUrl($category).'"><span>'.$this->htmlEscape($category->getName()).'</span></a>'."\n";
 $htmlChildren = '';
 if ($hasChildren) {
  $j = 0;
  foreach ($children as $child)
   if ($child->getIsActive())
    $htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
 }
 if ((!empty($htmlChildren)) || (!empty($phtmlChildren)))
  $html.= '<ul class="level' . $level . '">'."\n" .$htmlChildren .$phtmlChildren .'</ul>';
 $html.= '</li>'."\n";
 return $html;
}

The below lines in drawItem() function will fetch the current sub-category's product list based on the sub-category id. The $_productCollection has the list of product of selected subcategory by getting the id as $category->getId() function.

 $cur_category = Mage::getModel('catalog/category')->load($category->getId());
 $_productCollection = Mage::getResourceModel('catalog/product_collection')->addCategoryFilter($cur_category)->setOrder('position', 'ASC');

We will loop through them and generate the menu structure using <li></li> tag.

 


Comments

Andrew August 18. 2009 08:48
Works great but the products not only show in a drop down list, but also underneath all the categories in every menu???
I can't stop them from doing this can you help?
Andrew
DCKAP September 14. 2009 23:06
It work great.. good.. DCKAP
Magento Customization December 7. 2009 06:28
It's work great thank you for sharing it with us.

Add comment


(Will show your Gravatar icon)

  Country flag

Click to change captcha
biuquote
  • Comment
  • Preview
Loading