Showing Products in a Magento Mega Menu

It can be difficult finding creative ways to promote products on your ecommerce site, I’m sure most retailers would benefit from pushing sales of certain products. Trying to do this while keeping a site easily to navigate is sometimes difficult, I was recently asked to implement featured products into the drop down menu of a Magento site. Magento’s menu generating code is pretty straight forward and with a bit of careful coding you can insert some extra markup in the right places to allow a different product to be shown in each dropdown area.

The following code adds a product as an additional <li> element in the subcategory <ul>’s, then with a bit of css you can style it as required. View the code in action at http://www.oakfurnitureking.co.uk

 Some fairly technical code is about to follow. If you would prefer to stay away from the code but want this feature implemented on your site, send us a message and see what we can do for you.

Add The following function at the bottom of app/code/local/Mage/Catalog/Block/Navigation.php

/**     * Render a product in the drop down menu in HTML
        * @param catalog_category
        * @return string  */
    public function renderFeaturedProduct($category) {
        $collection = Mage::getResourceModel('catalog/product_collection');
        // Products per menu are cached to save a bit of time every page load.
        $cache = Mage::getModel('core/cache');
        $cache_key = "category_product_".$category->getId();
        //If a cache hasn't been created for this category then create it
        $html = $cache->load($cache_key);
        if(!$html){
            // It loads all products that have this attribue set to yes.
            $collection->addAttributeToSelect('menu_featured');
            $collection->addCategoryFilter($category);
            $collection->addFieldToFilter(array(
                array('attribute'=>'menu_featured','eq'=>'1'),
            ));
            if(0== count($collection)){
                return '';
            }
            $html = '<span class="menu_strong">Featured Product</span>';
            $product_arr = array();
            foreach($collection as $product){
                $product_arr[] = $product-&gt;sku;
            }
            // select a random product sku from what's available and load it.
            $rand = rand(0, count($product_arr)-1);
            $_product = Mage::getModel('catalog/product')-&gt;loadByAttribute('sku', $product_arr[$rand]);
            $html .= '&lt;div class="menu_product"&gt;';
            $html .= '&lt;a href="'.$_product-&gt;getProductUrl().'"&gt;';
            $html .= '&lt;img src="'.$this-&gt;helper('catalog/image')-&gt;init($_product, 'small_image')-&gt;resize(100).'" /&gt;';
            $html .= '&lt;/a&gt;';
            $html .= '&lt;span class="menu_product_title"&gt;'.$_product-&gt;getName().'&lt;/span&gt;';
            $html .= '&lt;span class="menu_product_price"&gt;£'.number_format($_product-&gt;getSpecialPrice(),2).'&lt;/span&gt;';
            $html .= '&lt;a href="'.$_product-&gt;getProductUrl().'"&gt;view item &lt;/a&gt;';
            $html .= '&lt;/div&gt;';
            $cache-&gt;save($cache_key, $html);
            }
        return $html; 
    }

If this file doesn’t exist then copy your app/code/core/Mage/Catalog/Block/Navigation.php file to the local code pool. Note that some themes may already be over-riding this file as I found with the GravDept Acumen template.

This function is then called within template/catalog/navigation/top.phtml,

foreach ($this->getStoreCategories() as $_category){
    $_menu .= $this->drawItem($_category);
    if($_category->getName() !== 'SALE'){
        $products = $this->renderFeaturedProduct($_category);
        $_menu=substr_replace($_menu, " <li class="featured_menu_product">{$products}</li>", -18, 0);
    } 
}

The featured product is then inserted into the menu code within the last that’s generated by the standard Magento function. The Menu on this site also contains a ‘Sale’ category that doesn’t have a drop down, so I had to add add an additional check for 

$_category->getName() !== ‘SALE’.

The product is then styled with CSS to be positioned right and not interfere with the main menu links.

There are a number of different ways to approach the product selection and assignment to the specific menus. I chose to add a new product attribute which indicates if the product should be featured in the ‘featured menu position’. Once selected it’s added to a list and a random product is chosen to be displayed from this list.
The drawbacks of this method are that it’s not possible to see what products have this attribute enabled without going into each product and it’s not possible to select specific products for a specific menu. If I had more time then I’d investigate adding a product selector to the category pages so you could assign it there, or do a custom module that allows a product category mapping to be created.

If you enjoyed this article, read the other Blog articles from our Magento agency or browse the site to see what else we do with Adobe Commerce, PunchOut Catalog and more.