Expand/Collapse Layered Navigation Categories

If your site has a lot of categories and/or sub-categories, your layered navigation “Shopping Options” block can get pretty large. An option is to make each category collapse or expand thereby saving valuable real estate on your page.

The method is pretty straight-forword.

1. Copy/Backup app/design/frontend/default/YOURTHEME/template/catalog/layer/view.phtml

2. In your new copy, make the following changes (check that your dl class name is assigned – it’s referenced in the Jquery at the bottom)

3. While your template may be slightly different, the only changes you’ll make is to add an “href” to the <dt> section, adding the class name to the <dl> section and finally adding the <script> section at the bottom.

Here’s the complete view.phtml template (make sure you’re using the /layer/view.phtml as there are other templates with the same name (ie /product/view.phtml)

layered_nav


<?php if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
<div class="block-title">
<strong><span><?php echo $this->__('Shop By') ?></span></strong>
</div>
<div class="block-content">
<?php echo $this->getStateHtml() ?>
<?php if ($this->getLayer()->getState()->getFilters()): ?>
<div class="actions"><a href="<?php echo $this->getClearUrl() ?>"><?php echo $this->__('Clear All') ?></a></div>
<?php endif; ?>
<?php if($this->canShowOptions()): ?>
<div class="panel panel-default">
<div class="block-subtitle panel-heading"><?php echo $this->__('Shopping Options') ?></div>
<dl class="layered-nav" id="narrow-by-list panel-body">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php if($_filter->getItemsCount()): ?>
<!-- <dt><?php //echo $this->__($_filter->getName()) ?></dt> -->
<dt><a href=""><?php echo $this->__($_filter->getName()) ?></a></dt>
<dd><?php echo $_filter->getHtml() ?></dd>
<?php endif; ?>
<?php endforeach; ?>
</dl>
</div>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<?php endif; ?>
</div>
</div>
<?php endif; ?>

<script type="text/javascript">
(function($) {
var allPanels = $('.layered-nav > dd').hide();

$('.layered-nav > dt > a').click(function() {
$(this).parent().next().slideToggle();
return false;
});

})(jQuery);
</script>

Upload your new template and you should be all set!

Comments

  1. By Faraz

  2. By swati

Leave a Reply