Including layered navigation twice on some page

Question

We have a situation on a responsive website, in which we need to include the layered navigation twice into a page as on mobile it's hidden in one place and shown above the content.

Oviously rule of thumb is you can not call catalog/layer_view more than once on one page.

Answer 1

Officially there is no way of actually doing this very cleanly unless you have a module that rewrites the filter adaptors, as its caused by the inner joins. So on a time limit the easy way to do this

function moveBlock()
{
     // This will execute whenever the window is resized
      height =  jQuery(window).height(); // New height
      width= jQuery(window).width(); // New width
      if(width < 777)
      {
        jQuery('.move').insertBefore('.category-products');
      }else
      {
        jQuery('.move').insertBefore('.block-compare');
      }
}
jQuery(window).resize(function() {
        moveBlock();
    });
jQuery(document).ready(function() {

    moveBlock();
});

Answer 2

You need to include layered navigation twice. Based on the comments, I have a strong feeling that, both of those layered navigation holds same content (more specifically holds same filters). If that is the case, there is no problem to use catalog/layer_view block twice in your layout. But you may probably need to use two templates for both of the blocks in order to do necessary changes. That is, second layered navigation filter should define like this in your layout file

 <block type="catalog/layer_view" name="mobile.layer.view" template="custom/template.phtml" />

Now in the custom template file, custom/template.phtml, you need to copy the current content that comes inside the default layer view template file app/design/frontend/<package>/<theme>/template/catalog/layer/view.phtml plus required changes. Most probably this "change" is addition of a script that will hide the whole content of the template from views other than mobile views and shows the content of the custom template only when it is a mobile view.

In short in this approach, we are using the second layer view block only in the case of mobile view. For rest view it will not shown in frontend. Adding a simple script inside the custom template will do the trick. This will let you avoid un-necessary rewrites

Answer 3

Go to your theme folder => layout -> catalog.xml.

Find the label <label>Catalog Category (Anchor)</label>

You can see after the few lines the following code. Just remove or comment that. My problem is solved.

<block type="catalog/navigation" name="catalog.leftnavig" before="-" template="catalog/navigation/sidenav.phtml"/> 

Hope this would be help. Thanks