Magento – How to move the Layered Navigation on the Search Results page

layoutPHPxml

I'm trying to move the layered navigation block from the left sidebar to a div in my /catalog/product/list.phtml

I did this successfully in my product category view, by adding getChildHtml('catalog.leftnav') ?> to /catalog/product/list.phtml. And then in local.xml I added

<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>

So the question is, how do I do this for the search results view? Both pages include /catalog/product/list.phtml. I tried to do this in local.xml:

<catalogsearch_result_index>
  <!-- remove from left block -->
  <reference name="left">
    <action method="unsetChild">
      <child>catalogsearch.leftnav</child>
    </action>
  </reference>

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

</catalogsearch_result_index>

But then the layered navigation block just disappeard from the search results page. I tried a few other combinations of things in the layout.xml file, but I'm just not knowledgable enough in Magento layouts to know what to do here. Can someone please point me in the right direction?

Thanks!

Best Answer

The problem is that the name of the product list is different on the category page as on the search results page.

Category: product_list
Search results: search_result_list

So with this in mind the following code should work for you

<catalogsearch_result_index>
    <!-- remove from left block -->
    <reference name="left">
        <action method="unsetChild">
            <child>catalogsearch.leftnav</child>
        </action>
    </reference>

    <!-- add as child to product list block -->
    <reference name="search_result_list">
        <action method="insert">
            <child>catalogsearch.leftnav</child>
        </action>
    </reference>

</catalogsearch_result_index>

Related Solutions

Magento – Magento Advanced Search not showing Nav Bar

I would say that the toolbar is not being loaded at all on the search results pages. Enabling template path hints will let you check to see if the block is being outputted to the page.

If it isn't being outputted you will want to check your theme xml and list.phtml files.

Assuming your results pages use the same template as your category pages (standard), the file YOURTHEME/template/catalog/product/list.phtml should have the following line in it:

<?php echo $this->getToolbarHtml() ?>

If it does have this line you will need to check your theme xml files to see if the block has been removed catalogsearch.xml, or overwritten in the theme's local.xml

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:

Layered navigation position between product list toolbar and product list

Best Answer

Related Solutions

Magento – Magento Advanced Search not showing Nav Bar

Magento – Move Layered Navigation Block Between Product List Toolbar and Product List

Related Topic