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.7Now, 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 🙂

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.

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.

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.

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.7This 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.

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.

Find the protected function _getHtml (should begin at around line 84).

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.

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.

28 comments

Is there a way in Magento 1.7 that the category can be a Top Navigation and at the same time it’s a subnavigation from another Top Menu? I’m trying to understand your code if this can help me. Looking forward to it. Thanks!

Hi, I just tried under magento 1.9.1.0. But it not works. I think the problem is my static block is not associate with one of the categories. I’m confused of your words ” If so, add the static block to the menu.” Can you help me out?
Regards!

Anyone tried this with more than 1 category. I have it working but when I add a second category its populated with the same block content as the first. Caches cleared, flushed and reindexed but no dice.

Regarding all the comments about floating the static block, this post is about functionality and how you can connect a category with a static block in the main navigation menu. Position and HTML structure of elements is not what I was aiming for because it depends on a particular design and template. On the other hand, it’s simple HTML and CSS which should not be a problem for a developer working in Magento.

thanks for this article. Im my case I want to replace the whole main navigation with a static block and I wonder where I can add this code: getLayout()->createBlock(‘cms/block’)->setBlockId(‘navigation’)->toHtml(); ?>. I also tried to add navigation to my page.xml but this does not work. Please help me…

Yes you can get the category id for both versions (1.6 and 1.7). It’s just a little bit different.For Magento 1.6: $category->getId();For Magento 1.7: substr($child->getId(), strrpos($child->getId(), ‘-‘) + 1);
The thing is, in Magento 1.7 $child->getId() returns a string with the “category-node-“ prefix (you get the following format “category-node-4”) so we need to extract the id from it by using some standard PHP sting functions.

As for the CSS classes I added one (“nav-static-block”) for categories that have static blocks but you can use the category id from above to specify the class for every item in the menu which you can then style with CSS.

Your email address will not be published. Required fields are marked *

Comment *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.