Magento – Show shop by and browse by left navigation

blockslayered-navigation

I have seen a few sites that have one block in the left sidebar that is browse by and shows subcategories in it and then a second separate block which is shop by with the rest of the attributes like color/brand in it, below.

Now as far as i know if the categories set anchor is set to "no", youll receive the browse by block and if the anchor is set then youll receive the shop by bloc.

My question is, how would i get both the browse by and shop by blocks showing on the top level navigation category pages?

I tried manually inserting the shop by XML in my localhost and bointing it towards the correct layout but no luck

thanks

Best Answer

This is pretty simple. You just need to dig some code.

1) Goto your catalog.xml file and find catalog_category_layered tag ie:(ANCHOR) tab.

2) insert the following code along with the layered navigation code.

<block type="catalog/navigation" name="catalog.leftnav1" after="-" template="catalog/navigation/left.phtml">
     <block type="core/text_list" name="catalog.leftnav.state.renderers1" as="state_renderers1" />
</block>

3) This will show the Category filter which is shown in the Non-Anchor left navigation.

4) Now, you might need to remove the category filter from shop-by as it is already been called above. To do so edit the layered navigation code as follow

<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml">
    <block type="core/text_list" name="catalog.leftnav.state.renderers" as="state_renderers" />
    <action method="unsetChild"><alias>category_filter</alias></action>
</block>

Related Solutions

Magento 1.9 – Using Attributes as Filters in Search and Category

Basically you need a way to remove some filters from the given categories from the admin panel. It can be done either by some improved layered navigation extension or just be using category layout updates.

Open the category edit page, switch to the "Custom Design" tab, and put the code in the "Custom Layout Update" field

<reference name="catalog.leftnav"> 
    <action method="unsetChild"><alias>shoes_size_filter</alias></action>
</reference>

Magento 1.9 – Accordion Left Navigation

You can accomplish this with any combination of Pure CSS alone, CSS + jQuery/Javascript, jQuery/Javascript (although this would be relatively pointless, considering you'd still need the CSS to style the way the menu looks).

Here are a few examples of Pure CSS accordion menus:

And a few examples of jQuery + CSS accordion:

While you can do more with jQuery, it's preferable not to use it if you have the luxury. In this case, assuming the mention CSS accordion menus fulfil your requirements, why should you burden your visitors and their browsers with the unnecessary script?

Note: The only instance where jQuery might be preferable is if you intend on supporting pre-IE9 browsers and some modern CSS features are not fully supported.

Best Answer

Related Solutions

Magento 1.9 – Using Attributes as Filters in Search and Category

Magento 1.9 – Accordion Left Navigation

Related Topic