How to add static blocks to main navigation dropdown?

Many stores require some additional information in the main navigation drop-down section. Displaying only subcategories might not always be enough and I noticed this is becoming a trend on shopping sites now days. Although there are many ways to accomplish this (including building you own custom module) I would like to show you a more clever way that will allow you to use static blocks and easily connect them with product categories. To better understand what I am talking about see the sample image of the end result below.

The idea

Magento 1.6 and earlier
The general idea is to use static blocks because they are easily editable and can hold many different types of content. The problem with static blocks is that you cannot assign them directly to product categories in Magento, or can you? Here’s an idea, set the “Identifier” value of the static block to be the same as the “URL Key” of the desired category. Now you have a logical connection between your static block and a product category. We just have to display the appropriate static blocks in the main navigation drop-down.

Magento 1.7
Now, in version 1.7 Magento introduced a completely new way of rendering menu items (thanks Johnboy for reminding me) that require some changes for this to work. The general idea is the same as above (for Magento 1.6) but this time we need to use something else instead of “URL Key” to connect our static block to a category. This time we will use the category ID value with a simple string prefix.

The implementation

Magento 1.6 and earlier
To implement this simple idea we need to override a core Magento block class and add a few lines of code to a single function. How simple is that 🙂

1. First we need to override the core Magento block class by copying the block file from core to local folder. We are going to use “Mage_Catalog_Block_Navigation”class so we need to copy:

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

   to

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

   If you don’t have a folder structure in your local folder you will need to create it.

2. Find the protected function _renderCategoryMenuItemHtml (should begin at around line 218). This is the function that will render all the menu items which is exactly what we need.
3. Now find this piece of code (lines 309-312):

   $html[] = '<ul class="level' . $level . '">';
   $html[] = $htmlChildren;
   $html[] = '</ul>';

4. Add the following code just above the line with the closed ul tag:

   $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId(strtolower($category->getUrlKey()))->toHtml());
   if(!empty($staticBlock)){
   	$html[] = '<span class="nav-static-block" style="background:#fff; border-top:1px solid #ccc; padding:10px;">';
   	$html[] = $staticBlock;
   	$html[] = '</span>';
   }

   The end result should look like this:

   $html[] = '<ul class="level' . $level . '">';
   $html[] = $htmlChildren;
   $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId(strtolower($category->getUrlKey()))->toHtml());
   if(!empty($staticBlock)){
   	$html[] = '<span class="nav-static-block" style="background:#fff; border-top:1px solid #ccc; padding:10px;">';
   	$html[] = $staticBlock;
   	$html[] = '</span>';
   }
   $html[] = '</ul>';

   The implementation is simple, check if there is a static block with the identifier value that is the same as the current category URL Key. If so, add the static block to the menu.

   I used some inline CSS for the sake of simplicity but you should use your own.

5. Now you need to create a static block with the identifier value set to whatever category URL Key you want and you are all done! I used the default Magento sample data and created a static block with the identifier set to “furniture” because that is the URL Key of the Furniture category.

Magento 1.7
This time we need to override a different Magento core class because in 1.7 Magento uses  Mage_Page_Block_Html_Topmenu to render the main menu.

1. First we need to override the core Magento block class by copying the block file from core to local folder. We need to copy:

   /app/code/core/Mage/Page/Block/Html/Topmenu.php

   to

   /app/code/local/Mage/Page/Block/Html/Topmenu.php

   If you don’t have a folder structure in your local folder you will need to create it.

2. Find the protected function _getHtml (should begin at around line 84).
3. Now find this piece of code (lines 121-123):

   $html .= '<ul>';
   $html .= $this->_getHtml($child, $childrenWrapClass);
   $html .= '</ul>';

4. Add the following code just above the line with the closed ul tag:

   $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId($child->getId())->toHtml());
   if(!empty($staticBlock)){
   	$html .= '<span style="background:#fff; border-top:1px solid #ccc; padding:10px;">';
   	$html .= $staticBlock;
   	$html .= '</span>';
   }

   The end result should look like this:

   $html .= '<ul class="level' . $childLevel . '">';
   $html .= $this->_getHtml($child, $childrenWrapClass);
   $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId($child->getId())->toHtml());
   if(!empty($staticBlock)){
   	$html .= '<span class="nav-static-block" style="background:#fff; border-top:1px solid #ccc; padding:10px;">';
   	$html .= $staticBlock;
   	$html .= '</span>';
   }
   $html .= '</ul>';

   The implementation is simple, check if there is a static block with the identifier value set to current category ID with a prefix “category-node-“. If so, add the static block to the menu. The prefix is used because if you inspect the value of $chlid->getId() you will see that it returns a category ID with that prefix so, for example, if the category ID is “10” you will get “category-node-10”. I used this value because it is unique for each individual category.

   I used some inline CSS for the sake of simplicity but you should use your own.

5. Now you need to create a static block with the identifier value set to whatever category Prefix+Category ID you want and you are all done! I used the default Magento sample data and created a static block with the identifier set to “category-node-10” because Furniture category has the id of 10. That’s it.

Hope you’ll find this post helpful.