Thursday, 8 December 2011

Adding show / hide more functionality in the Magento Layer NavigationFilter

Go to the app/design/frontend/default/YOUR_THEME/template/catalog/layer/filter.phtml
Replace the existing code with:
<ol>
<?php
$displaySize=4;
$i=0;
$filterName=strtolower($this->getName());
$cnt=count($this->getItems());
foreach ($this->getItems() as $_item): ?>
 <?php if($i == $displaySize) {   ?>
 <div id="more-<?php echo $filterName?>"><a >Show Filter</a></div>
 <div id="cont-<?php echo $filterName?>">
 <?php }  ?>
  <li>
  <?php if ($_item->getCount() > 0): ?>
  <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?></a>
  <?php else: echo $_item->getLabel() ?>
  <?php endif; ?>
  (<?php echo $_item->getCount() ?>)
  </li>
<?php $i++; 
if($i==$cnt &amp;&amp; $cnt > $displaySize) 
    echo '<div id="less-'.$filterName.'"><a >Hide Filter</a></div></div>';  ?>
<?php endforeach ?>
</ol>
Now open the file view.phtml in the same folder
Add in the beginning:
<?php $displaySize=4;
$hiddenFilters=array(); ?>
Add just before if($_filter->getItemsCount()):
if($_filter->getItemsCount() > $displaySize) 
 $hiddenFilters[]=strtolower($_filter->getName());
Add at the end of file:
<script>
Event.observe(window, 'load',
function() {
<?php foreach($hiddenFilters as $v)
{
echo "$('cont-".$v."').hide();";
} ?>
}
);
 
// Register event 'click' and associated call back.
Event.observe(document, 'click', respondToClick);
 
// Callback function to handle the event.
function respondToClick(event) {
var element = event.element();
//------
<?php foreach($hiddenFilters as $p)
{
echo "if(element.up('div').id=='more-".$p."')
{
$('cont-".$p."').show();
$('more-".$p."').hide();
}
if(element.up('div').id=='less-".$p."')
{
$('cont-".$p."').hide();
$('more-".$p."').show();
}";
} ?>
 
//-----
 
}
 
</script>

10 comments :

  1. Some genuinely choice blog posts on this website , saved to bookmarks .

    ReplyDelete
  2. Hey! I’ve just stopped by to say thanks for this amazing review. Take care!

    ReplyDelete
  3. Wohh exactly what I was searching for, regards for posting.

    ReplyDelete
  4. hi guys,

    sorry not working for me... magento 1.6.2

    i'm getting a Parse error: syntax error, unexpected ';' in C:\wamp\www\xxx\app\design\frontend\xxx\xxx\template\catalog\layer\filter.phtml on line 54

    any body any suggestions?


    Regards,

    tom.

    ReplyDelete
  5. Thanks a lot for sharing. This was very helpful

    ReplyDelete
  6. You just saved me $199 for an extension that I won't fully use and may tear my template! Instead I used your code :) Thanks

    ReplyDelete
  7. Event.observe (window, 'load',
    function (... does not work with Magento 1.9.
    Any solution?
    Thank you

    ReplyDelete
  8. Please use
    document.observe(‘contentloaded’,
    function { ---- code ----- });

    Instead of
    Event.observe(window, 'load',
    function() { ---- code ----- });

    ReplyDelete
  9. C:\xampp\htdocs\magento\app\design\frontend\default\default\template\catalog\layer\filter.phtml on line 54 error comes for me
    plz suggest

    ReplyDelete