A popular eCommerce script Magento is used very widely nowadays. It have very long list of useful and required features for a running eCommerce business. Magento supports top navigation by default. Its very robust and useful Most of websites running on Magento using it.
But when clients ask for vertical or side menu, so it can expend or show nicely organized. In this article I am going to explain how to set side menu either in left-sidebar or right-sidebar.
In this article I am going to share how to achieve this including a kind of mega menu(side) with category images. This menu could use a little js and CSS for styling & image on hover but it further concern.
The idea for generating such menu is get Magento default navigation block, fetch and display according to our requirement. We could get here Mage's
Model('catalog/category') but in this way we will loose control on Magento's category option "Include in Navigation Menu ". Using navigation block we will have control what category to be shown. Now we will create a specific file for this navigation and call to our layout.
The Navigation File
For the navigation we need to get categories to be shown in menu, for this we need to create a new file in
app/design/frontend/base/default/template/page/html/sidemenu.phtml. We will call this on our layout, we can do it through controller but lets keep it simple. Open this file in any eidtor and put the contents as
<div class="menu_body"> <ol> <?php $menuobj = new Mage_Catalog_Block_Navigation(); $mainCategories = $menuobj->getStoreCategories(); Mage::registry('current_category') ? $currentCategoryId = Mage::registry('current_category')->getId() : $currentCategoryId=''; foreach ($mainCategories as $_category): ?> <li> <strong><?php echo $_category->getName(); ?></strong> <?php $categoryChildren = $_category->getChildren(); ?> <?php if($categoryChildren->count()) : ?> <ol> <?php foreach($categoryChildren as $_categoryChild) : ?> <?php $_categoryChildModel = Mage::getModel('catalog/category')->load($_categoryChild->getId());?> <li><div> <img src="<?php echo Mage::getModel('catalog/category')->load($_categoryChild->getId())->getImageUrl(); ?>" hight="100" width="100"> </div> <?php $currentCategoryId===$_categoryChild->getId() ? $bold="style="font-weight:bold"" : $bold=''; echo ' ' . '<a href="' . $_categoryChildModel->getUrl() . '"' . $bold . '>' . $_categoryChild->getName() . '</a>'; ?> </li> <?php endforeach; ?> </ol> <?php endif; ?> </li> <?php endforeach ?> </ol>
As you can see there is a small image of 100×100 in front of the child
li tag. You can set it on hover by using Js & CSS.
Getting in to Layout
For adding it in to layout we need to add as block in out Layout. To do so open
app/design/frontend/base(or Your theme)/default/layout/page.xml. Put there.
<reference name="left"> <block type="core/template" name="catalog.sidemenu" template="page/html/sidemenu.phtml" /> </reference>
for Left Side navigation and
<reference name="right"> <block type="core/template" name="catalog.sidenav" template="page/html/sidemenu.phtml" /> </reference>
for Right side menu. Now layout part is completed and your file will be called in magento frontend. You can now check it and modify according to your requirement.
Now its time to customize it and make look & feel better, you can turn it in to Mega-Menu. Or you can make tree like structure. As you can see we use one of the Magento feature and turn that in to another useful feature. Like this it have many capabilities and can be modified. I am waiting for your comments and suggestions.