Magento: Move product filters

Question

As default, the available product filters are displayed in the left sidebar. But I'd like to display them above the product list instead.

I simply tried to just copy the following code from /template/catalog/layer/view.phtml to /template/catalog/product/list.phtml:

<p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p>
<dl id="narrow-by-list">
    <?php $_filters = $this->getFilters() ?>
    <?php foreach ($_filters as $_filter): ?>
        <?php if($_filter->getItemsCount()): ?>
            <dt><?php echo $this->__($_filter->getName()) ?></dt>
            <dd><?php echo $_filter->getHtml() ?></dd>
        <?php endif; ?>
    <?php endforeach; ?>
</dl>

But apparently it doesn't work that way. How should I do?

Thank you in advance!

Here is the designers guide: magentocommerce.com/wiki/4_-themes_and_template_customization/0-_theming_in_magento/designing-for-magento — ʍǝɥʇɐɯ

benmarks benmarks · Accepted Answer · 2011-11-01T08:03:58

You need to make the block (a php class) which uses the filters template a child of the class where you wish to include those filters. This is done in layout XML.

In a local.xml file in your theme's layout folder, do the following:

<?xml version="1.0" ?>
<layout>
    <catalog_category_layered>
        <!-- remove from left block -->
        <reference name="left">
            <action method="unsetChild">
                <child>catalog.leftnav</child>
            </action>
        </reference>

        <!-- add as child to product list block -->
        <reference name="product_list">
            <action method="insert">
                <child>catalog.leftnav</child>
            </action>
        </reference>
    </catalog_category_layered>
</layout>

using the above, you can simply call <?php echo $this->getChildHtml('catalog.leftnav') ?> inside your custom list template for it to show. You can either style it using CSS, or you can change its template by adding this inside the catalog_category_layered node above:

        <reference name="catalog.leftnav">
            <action method="setTemplate">
                <child>path/to/template.phtml</child>
            </action>
        </reference>

Magento: Move product filters

1 Answers