cancel
Showing results for 
Search instead for 
Did you mean: 

Magento RWD theme - layered navigation not showing

Magento RWD theme - layered navigation not showing

We like the layered navigation on the right side of the category page. Therefore, I inserted following code in our local.xml file:

<catalog_category_default translate="label">
 <reference name="root">
     <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
 </reference>

In my catalog.xml file, I edit this:

<reference name="left_first">
        <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml">
            ...

to this:

<reference name="right">
        <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml">
            ...

On large viewports, I see the layered navigation on the right side, as it should be. As soon as I resize the window to a tablet resolution, the layered navigation disappears. Normally, the layered navigation is added on top of all products in the tablet resolution with the label "FILTER".

1 REPLY

Re: Magento RWD theme - layered navigation not showing

Hello there,

 

You should be able to acheive what you would like by modifying your app.js. Find the following block of code:

 

  // ==============================================
    // Block collapsing (on smaller viewports)
    // ==============================================

    enquire.register('(max-width: ' + bp.medium + 'px)', {
        setup: function () {
            this.toggleElements = $j(
                // This selects the menu on the My Account and CMS pages
                '.col-left-first .block:not(.block-layered-nav) .block-title, ' +
                    '.col-left-first .block-layered-nav .block-subtitle--filter, ' +
                    '.sidebar:not(.col-left-first) .block .block-title'
            );
        },
        match: function () {
            this.toggleElements.toggleSingle();
        },
        unmatch: function () {
            this.toggleElements.toggleSingle({destruct: true});
        }
    });

 

  • Replace the line:
'.sidebar:not(.col-left-first) .block .block-title'

 

  • With the line: 
'.block-layered-nav .block-subtitle--filter'

 

  • Change the 'match' method to the following:
 match: function () {
	$j('.col-main').prepend($j('.block-layered-nav'));
        this.toggleElements.toggleSingle();
},

 

  • Change the 'unmatch' method to the following:  
 unmatch: function () {
	$j('.col-right').prepend($j('.block-layered-nav'));
        this.toggleElements.toggleSingle({destruct: true});
}

 

Hopefully that will do the trick! Smiley Happy

Problem solved? Click Accept as Solution!
Magento Certified Developer | www.iwebsolutions.co.uk | Magento Small Business Partner
Tags (1)