Magento 1.9 – Collapse Filters in RWD Theme

magento-1.9rwd-theme

I have installed Magento 1.9.0.0 and have started tweaking the rwd theme. I want to collapse the filters list on product listings so that only the headers show and you can click on the header to see your options for that filter. I am far from being an expert in Magento and despite digging around in the files and googling for answers for some time I am none the wiser. Can anyone help?

Best Answer

Try This

    jQuery(document).ready(function($) {
    var dt = jQuery('#narrow-by-list dt'),
        dd = jQuery('#narrow-by-list dd');
        dt.next().hide();
        dd.first().show();
        dt.first().addClass('active');
        dt.click(function(){
            jQuery(this).toggleClass('active').next().slideToggle();
    })
    });

1. Define your structural block

File : app\design\frontend\{package}\{theme}\layout\local.xml

<layout>
    <catalog_category_view>
        <reference name="root">
            <block type="core/template" name="category.top.banner" as="category_top_banner" template="custom/category/top_banner.phtml"></block>
        </reference>
    </catalog_category_view>
</layout>

Here <catalog_category_view /> is a specific layout update handle node for category pages. ie Magento process this layout handle only when it renders a category page. Our structural block is category.top.banner and it is added to root block.

2. Call Our Block in Root Template

File : app\design\frontend\{package}\{theme}\template\page\3columns.phtml

...
<div class="main">
            <?php echo $this->getChildHtml('breadcrumbs') ?>
            <?php echo $this->getChildHtml('category_top_banner') ?>
..

As you can see, we are calling our block just below breadcrumbs block. Follow the same step in every page layout template files (ie files inside page\ directory) in order to obtain the same result in every page layout.

Custom RWD Theme Falling Back on Base Theme Instead of RWD in Magento 1.9

UPDATE

As @ProxiBlue pointed my mistake, you need to put this in your theme/etc/theme.xml

<?xml version="1.0"?> 
   <theme> 
     <parent>rwd/default</parent>
   </theme>

and have empty in default section, unless you have default theme in your theme package.

~~Things to understand of fallback of magento theme~~

~~You should have RWD in "Default" section of system > configuration > design > theme. This will make sure your theme will fallback to this theme.~~

Points to remember

When there is no required .phtml file exist in RWD theme, then it will again fall back to base theme.
Not all .phtml files exist in RWD theme, some of them extend from base theme.
Same thing for css or js or image files.

Hope this helps you.

Best Answer

Related Solutions

Magento 1.9 RWD Theme – Category View Layout

1. Define your structural block

2. Call Our Block in Root Template

Custom RWD Theme Falling Back on Base Theme Instead of RWD in Magento 1.9

Related Topic