Magento Add Accordion menu for the Layer Navigation(给左侧筛选栏加上jquery滑动效果)

戎洛华
2023-12-01

1.下载jquery http://jquery.com/

2.将jquery加入page里面,可以使page.xml或者catalog.xml

<action method="addJs"><script>your-custom-folder/your-jQuery-scriptname.js</script></action>

3.修改/app/design/frontend/base/default/template/catalog/layer/view.phtml,查找如下代码:

    <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>

在dt节点上加上a标签:

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

4.启动Jquery,直接写在view.phtml或者是head里面:

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

参考文章:http://www.xpressbangla.com/create-accordion-menu-for-magento-layered-navigation/

 类似资料: