Categories
magento

Move layered navigation block between product list toolbar and product list

The reason your layered navigation only shows up at the bottom or at the top of the page is that you add the block at the wrong block “level”.

You added the block to the block content which only has two direct child blocks: category.products and product.tooltip. Therefore you only can add your block at the top, between these two blocks or at the bottom.

How to move the layered navigation between the product list toolbar and the product list

Add this code to your layout 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>

This will move the layered navigation block from the left column to the content column without re-creating classes and the like. You can see I inserted the block as a child of the block product_list.

If you call the page now you will see that the layered navigation isn’t displayed at all. That’s because opposed to the content block, the product_list block doesn’t output all child blocks by default. You have to echo the block yourself in the template file.

Copy app/design/frontend/base/default/template/catalog/product/list.phtml (replace base/default with your base theme if you use another one as your starting point) to your theme and tell Magento to output the layered navigation directly after the first toolbar:

<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
    <?php echo $this->getToolbarHtml() ?>
    <?php echo $this->getChildHtml('catalog.leftnav'); /* THIS IS THE NEW LINE */ ?>
    <?php // List mode ?>

You will get something like this and can go on from here:

WswgV

 

vie : Matthias Zeis, stackexchange

Leave a Reply