2

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.

  • What theme are you using? For example, Magentos RWD theme has a column called left_first which, on mobile, moves above the content – Sander Mangel Oct 27 '14 at 14:36
  • why do you think catalog/layer_view block cannot use twice in one page ? I think if you are gonna use the same collection in both layered navigation,then there is no problem to include it in one page any number of times – Rajeev K Tomy Oct 27 '14 at 14:39
  • there is no reason as its a singleton so the results are always going to be the same and held in the same object. Also the package is bespoke and we are moving the layered nav into the content on mobile when the screen size is small so its tabbed under the category banner – TTech IT Solutions Oct 27 '14 at 14:40
  • yes. But in both cases, you are going to use the same collection right. I think you need to hide LN in content section all other views except mobile view. For mobile view only you need to show the that LN. So basically all of LN should hold same collection. So there is no issue – Rajeev K Tomy Oct 27 '14 at 15:05
  • at the moment they are added via xml, but one of which is css hidden, are you talking about doing a php mobile check and adding them by creating the blocks rather than using the xml approach ? – TTech IT Solutions Oct 27 '14 at 15:07
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();
});
0

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

  • this incidently also fails the moment you have multiple blocks using type="catalog/layer_view" this singleton, because of the queries it runs you get .... "You cannot define a correlation name " ... because the models already defined. – TTech IT Solutions Oct 27 '14 at 17:20
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.