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".
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}); } });
'.sidebar:not(.col-left-first) .block .block-title'
'.block-layered-nav .block-subtitle--filter'
match: function () { $j('.col-main').prepend($j('.block-layered-nav')); this.toggleElements.toggleSingle(); },
unmatch: function () { $j('.col-right').prepend($j('.block-layered-nav')); this.toggleElements.toggleSingle({destruct: true}); }
Hopefully that will do the trick!