Layered Navigation on Home Page or Any CMS Page Magento

We recently had a client approach us and request that they want a navigation on the sidebar of every page of their new Magento shop. At first we thought this would be very easy to add and take a few hours to download a plugin and have the categories push to every page. We soon established they wanted the layered navigation to be present on the homepage and then filter through all of the attributes.

Unfortunately Magento does not allow this to happen and there are many plugins out there that charge a fortune for something which is relatively easily to do. We are going show you how to get the layered navigation to any of your CMS pages and how to give it a cool and sexy accordion effect using jQuery. There are a lot of forums which have this type of post but none of them work as well as this nor do they have an accordion effect too. This has been tested on Magento 1.5

The first step is to navigate yourself to your CMS pages in the backend and update the XML file for your home page. This can be done by going to:

CMS > Manage Pages > Homepage > Layout Update XML and in here please place the code below:

<reference name="left">
    <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/homeview.phtml"/>
</reference> 

Second step is going navigate yourself through some code. Please go to /app/code/local/mage/catalog/model/layer.php and do not rewrite the original file, make a copy of it in the local folder.

Find this code:

public function getCurrentCategory()
{
  $category = $this->getData('current_category');
  if (is_null($category)) {
      if ($category = Mage::registry('current_category')) {
          $this->setData('current_category', $category);
      }
      else {
          $category = Mage::getModel('catalog/category')->load($this->getCurrentStore()->getRootCategoryId());
          $this->setData('current_category', $category);
      }
  }
  return $category;
}

Replace the above code with this code below:

public function getCurrentCategory()
{
  $category = $this->getData('current_category');
  if (is_null($category)) {
      if ($category = Mage::registry('current_category')) {
          $this->setData('current_category', $category);
      }
      else {
          $category = false;
          $this->setData('current_category', $category);
      }
  }

  //added to make this work for front page:
  if(is_null($category) || $category == false) {      
      $home_category = Mage::getModel('catalog/category')->load(40); //number must correspond to 'all products page' category
      $this->setData('current_category', $home_category);
      $category = $this->getData('current_category');
      //return $category;
  }
  //end addition

  return $category;
}

This is the only part where you will need to edit the core files but like suggested please place the code in the local folder rather then hacking the core files.

Next step is to create a file called homeview.phtml in /template/catalog/layer/ with the following code:

<?php if($this->canShowBlock()): ?>
<div class="block adv-search-nav">
    <div class="block-content">
        <?php echo $this->getStateHtml() ?>
        <?php if($this->canShowOptions()): ?>
 <?php /*?><p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p><?php */?>
            <dl id="narrow-by-list">
                <?php $_filters = $this->getFilters() ?>
                <?php foreach ($_filters as $_filter): ?>
                <?php if($_filter->getItemsCount()): ?>
					<?php if($this->__($_filter->getName() == "Category")): ?>
                    	<dt><a href="JavaScript:void(0);">Type</a></dt>
                        <?php 
						$category_model = Mage::getModel('catalog/category');
						$_category = $category_model->load(9); 
						$all_child_categories = $category_model->getResource()->getAllChildren($_category);
						?>
                        <dd>
                            <ol>
								<?php
									foreach($all_child_categories as $id):
										$childCategory = $category_model->load($id);
										if($childCategory->getName() == "shop" || ($childCategory->getEntityId() == 10 || $childCategory->getEntityId() == 11 || $childCategory->getEntityId() == 12 || $childCategory->getEntityId() == 13 || $childCategory->getEntityId() == 14 
										|| $childCategory->getEntityId() == 16 || $childCategory->getEntityId() == 17 || $childCategory->getEntityId() == 18 || $childCategory->getEntityId() == 19) ):
										else:
											echo "<li>";
											echo '<a href="/shop.php?cat='.$childCategory->getEntityId().'" id='.$childCategory->getEntityId().'>'.$childCategory->getName().' <span class="product-items">('.Mage::getModel("catalog/category")->load($id)->getProductCount().')</span></a>';
											echo "</li>";
		
										endif;
									endforeach;
                                ?>
                            </ol>
                        </dd>
 
                    <?php else: ?>
                        <dt><a href="JavaScript:void(0);"><?php echo $_filter->getName() ?></a></dt>
                        <dd><?php echo str_replace(array('?','/?'),array('shop.php?','/shop.php?'),$_filter->getHtml()) ?></dd>
                    <?php endif; ?>
                <?php endif; ?>
            
                <?php endforeach; ?>
            </dl>
            <script type="text/javascript">decorateDataList('narrow-by-list')</script>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

<script type="text/javascript">
//<![CDATA[
		$j("dl#narrow-by-list> dd:visible").hide();
		$j(document).ready(function(){
		$j("dl#narrow-by-list> dt a").addClass('test1');
	});
		$j("dl#narrow-by-list> dt a").click(function(){
		if($j(this).hasClass('test1')){
			$j("dl#narrow-by-list> dt a").addClass('test1').removeClass('test2');
			$j("dl#narrow-by-list> dd:visible").slideUp("fast");
			$j(this).parent().next().slideDown("fast");
			$j(this).removeClass('test1').addClass('test2')	
		}
		else
		{
		$j("dl#narrow-by-list> dt a").addClass('test1').removeClass('test2');
		$j(this).removeClass('test2').addClass('test1')
		$j(this).parent().next().slideUp("fast");	
		}
});
//]]>
</script> 

Replace the category ids etc to match yours. This navigation should push through all of your attributes and all of you categories as well. The rest is up to you how you style it, if you have any question please comment on our blog thanks.

Related posts:

  1. Design Showcase – Home Farm
  2. Install Magento Locally On A Mac
  3. Magento: Create XML Blocks
  4. Magento: Adding an RSS Feed
  5. Magento: Translate Inline

Leave a Reply


Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482