Custom SEF Sidebar Navigation For Magento

I wanted to share a quick snippet of code that I created for adding a custom navigation section to your Magento left column area. I currently created this navigation area for a client to replace the layered navigation. The layered navigation has a lot of great features and organization but probably better severs as a multi -select drop down. Also in the previous versions of Magento the layered navigation was not search engine friendly.

This is not currently the case but I still find that there is not enough control over the category / subcategory display within the layered navigation. This custom navigation block could be used above some of the other build in features such as price, manufacturer etc. that is simple to accomplish with the layered navigation.

Also of note, I have found including other SEO centralized developers, that the layered navigation simply refreshs that page, so should you have content on the main category page, the layered navigation link creates confusion becuase the page content continues to display.

Overall the layered navigation should be used for non-search engine targeted categorization as mentioned – price, size, etc.

To create the custom navigation simply create a new file, such as custom-navigation.php. I uploaded by custom navigation into the following directory:

app/design/frontend/blank/template/template/catalog/navigation

I adapted the following navigation area from a Magento tutorial. However I have updated the navigation to include a number of specific features that work very well. The example below will give you an idea of how the custom navigation area is laid out.

Products

  • subcat 1
  • subcat 2
  • subcat etc.

Currently Browsing

  • current category

Categories

  • main category 1
  • main category 2
  • main category 3
  • main category etc.

Because I wanted to create a robust navigation bar I wanted to have control over what information was displayed and make both browsing and bouncing around within the site very affective. The following navigation code allowed me to accomplish this and works great in conjunction with main body category navigation.

Custom Navigation Code:

<?php

/**
* Custom Nav
*/

?>

<?php
/* Get the categories that are active for the store */
$_main_categories=$this->getStoreCategories();

/* Get the current category the user is in */
$_current_category=$this->getCurrentCategory();

/* Get the current category path */
$_categorypath = $this->getCurrentCategoryPath();
?>

<div>
<div>
<div>
<h2>Shop by</h2>
</div>
<div>
<?php
if ($_main_categories):
/* This bit cycles through the categories – setting the next one to current */
foreach ($_main_categories as $_main_category):
if($_main_category->getIsActive()):
$cur_category=Mage::getModel(‘catalog/category’)->load($_main_category->getId());
$layer = Mage::getSingleton(‘catalog/layer’);
$layer->setCurrentCategory($cur_category);
?>

<?php
/* Check the category variable loop against the current category path if it is – print sub categories */
if (in_array($this->getCurrentCategory()->getId(), $_categorypath)): ?>
<?php $_maincategorylisting=$this->getCurrentCategory()?>
<?php $_categories=$this->getCurrentChildCategories()?>
<?php if($_categories->count()):?>

<dl>
<dt><?php echo $this->__(‘Products’) ?></dt>
<ol>
<? foreach ($_categories as $_category_link):?>
<? if($_category_link->getIsActive()):
$cur_subcategory=Mage::getModel(‘catalog/category’)->load($_category_link->getId());
$layer = Mage::getSingleton(‘catalog/layer’);
$layer->setCurrentCategory($cur_subcategory);

?>
<li><a href=”<?php echo $this->getCategoryUrl($_category_link)?>”> <?php echo $_category_link->getName()?></a></li>
<? endif;?>
<?endforeach?>
</ol>
</dl>

<?php /* This resets the category back to the original pages category
****     If this is not done, subsequent calls on the same page will use the last category
****    in the foreach loop
*/   ?>
<?php $layer->setCurrentCategory($_current_category);  ?>
<?endif;?>

<dl>
<dt><?php echo $this->__(‘Currently Browsing’) ?></dt>
<ol>
<? /* Current Category */  ?>
<li><a href=”<?php echo $this->getCurrentCategory()->getUrl()?>”><?php echo $this->getCurrentCategory()->getName();?></a></li>
</ol>
</dl>

<?endif;?>

<?php
endif;
endforeach;?>

<?php $layer->setCurrentCategory($_current_category);  ?>
<?else:
?>
<p>Continue Broswing</p>
<?php endif; ?>

<dl>
<dt><?php echo $this->__(‘Categories’) ?></dt>
<ol>
<?php
if ($_main_categories):
/* This bit cycles through the categories – setting the next one to current */
foreach ($_main_categories as $_main_category):
if($_main_category->getIsActive()):
$cur_category=Mage::getModel(‘catalog/category’)->load($_main_category->getId());
$layer = Mage::getSingleton(‘catalog/layer’);
$layer->setCurrentCategory($cur_category);

/* Write the main categories */
?>

<li><a href=”<?php echo $this->getCurrentCategory()->getUrl()?>”><?php echo $this->getCurrentCategory()->getName();?></a></li>

<?php /* This resets the category back to the original pages category
****     If this is not done, subsequent calls on the same page will use the last category
****    in the foreach loop
*/   ?>
<?php $layer->setCurrentCategory($_current_category);  ?>

<?php
endif;
endforeach;
else:
?>
<p>Continue Broswing</p>
<?php endif; ?>
</ol>
</dl>

</div>
</div>
</div>

Next you will want to call the custom navigation from either a static block or layout file. Personally I usually do both because I may need a static block in the left sidebar for a number of reasons. In order to have control over easily adding content I simply call a static block from the left layout block

app/design/frontend/blank/theme110/layout/catalog.xml

<block type=”cms/block” name=”custom_navigation” before=”-“>
<action method=”setBlockId”><block_id>custom_navigation</block_id></action>
</block>

If you have not already done so, create a static block with the identifier – custom_navigation. Within the static block you can now easily reference the custom navigation template file:

{{block type=’catalog/navigation’ name=’customNav’ template=’catalog/navigation/custom-navigation.phtml’}}

Save the changes and view the custom navigation.

Now should you want to update the custom navigation static block to include sale information or something of that nature you have a more robust area already created to customize.

Comments

  1. nicholas manderfield says:

    sweet jesus, this post is awesome.

    you just dug me out of a mental hole, only a few more to go! i will look around your blog to see if i can find more things solving these magento issues that boggle my mind

Speak Your Mind

*

CAPTCHA image
*