Change the Position Of Layered Navigation

Question

I have found lots of discussion regarding the title, but the position is not changing. I want to move layered navigation from left side to top of the category page. I have found the same question at this link Move layered navigation block between product list toolbar and product list,but that doesn't seem to be working.

catalog.xml:

<catalog_category_layered translate="label">
        <label>Catalog Category (Anchor)</label>

       <reference name="left_first">

            <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" />
            </block>
        </reference>

        <reference name="content">
            <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
                <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                    <block type="core/text_list" name="product_list.name.after" as="name.after" />
                    <block type="core/text_list" name="product_list.after" as="after" />
                    <!-- <action method="addReviewSummaryTemplate"><type>default</type><template>review/helper/su.phtml</template></action> -->
                    <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                        <block type="page/html_pager" name="product_list_toolbar_pager"/>

                    </block>
                    <action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
                    <action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>
                    <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>

                    <action method="setColumnCount"><count>4</count></action>
                </block>
            </block>
        </reference>
    </catalog_category_layered>

local.xml:

<?xml version="1.0"?>
<layout version="0.1.0">
    <catalog_category_layered>
        <reference name="left">
            <action method="unsetChild"><alias>catalog.leftnav</alias></action>
        </reference>
        <reference name="product_list">
            <action method="insert"><blockName>catalog.leftnav</blockName></action>
        </reference>
    </catalog_category_layered>
</layout>

I know the solution mentioned at the link is correct,.. any idea?

Thanks!.

Answer 1

The link you have posted is the correct solution.

You will need to create a local.xml file in your theme in the following directory.

app/design/frontend/yourtheme/yourpackage/layout/local.xml

You can then unset and set the block you wish to reposition.

 <?xml version="1.0"?>
<layout version="0.1.0">
    <catalog_category_layered>
        <reference name="left_first">
            <action method="unsetChild"><alias>catalog.leftnav</alias></action>
        </reference>
        <reference name="product_list">
            <action method="insert"><blockName>catalog.leftnav</blockName></action>
        </reference>
    </catalog_category_layered>
</layout>

After you have added your local xml and xml updates make sure you clear all Magento caches.