Saturday, 22 February 2014

Accordion Menu for Magento Layered Navigation

Now you need to edit view.phtml which is located in:
/app/design/frontend/default/default/template/catalog/layer/view.phtml
If you not found view.phtml file there, then go:
/app/design/frontend/base/default/template/catalog/layer/view.phtml
Then open the view.phtml you will see the following code in that page:

<dl id="narrow-by-list">
    <?php $_filters = $this->getFilters() ?>
    <?php foreach ($_filters as $_filter): ?>
    <?php if($_filter->getItemsCount()): ?>
        <dt><?php echo $this->__($_filter->getName()) ?></dt>
        <dd><?php echo $_filter->getHtml() ?></dd>
    <?php endif; ?>
    <?php endforeach; ?>
</dl>

Now you need to add an anchor element in “dt” like so:

<dt><a href="/"><?php echo $_filter->getName() ?></a></dt>

After that add the following code in the bottom of view.phtml :

<script type="text/javascript">/* <![CDATA[ */jQuery(document).ready(function(){
jQuery
("dl#narrow-by-list> dd").hide();jQuery("dl#narrow-by-list> dt").click(function(){
jQuery
(this).next("dd").slideToggle("fast");
return 
false;});});/* ]]> */
</script>

No comments:

Post a Comment