1

I'm having some issues re-ordering elements within following file:

[MyTheme]/Magento_Catalog/layout/catalog_category_view.xml

I'm trying to move the layered navigation below the product toolbar, above the products grid.

I've tried, the following:

<move element="sidebar.main" destination="category.products.list" after="product_list_toolbar"/>


   <move element="catalog.navigation.renderer" destination="category.products.list" after="product_list_toolbar"/>
    <move element="catalog.leftnav" destination="category.products.list" after="product_list_toolbar"/>
    move element="catalog.navigation.state" destination="category.products.list" after="product_list_toolbar" />

This removes the filter entirely, instead of moving it.

Am I correct to try and move this element within the theme catalog_category_view.xml? Or should this be moved with a custom Layered Navigation module ?

An update on this, i was able to move the layered nav to the top of the page via

 <move element="catalog.leftnav" destination="content" before="category.products"/>

if i set the destination to any more deeply nested blocks the nav just disappears.

I've also tried to move the product toolbar around the layered nav, like so

    <move element="product_list_toolbar" destination="content" before="-"/>

The nav is still appearing above the toolbar though.

  • 4th move element does not start properly move element="catalog.navigation.state" – Amit Bera Jun 9 '16 at 10:38
  • That was just a copy and paste error, i'm still not able to see the filter. Thanks – Sophie Baxter Jun 9 '16 at 11:30
4

The solution i came up with is as follows:

<move element="catalog.leftnav" destination="category.product.list.additional" before="-"/>
  • I am trying to do something very similar, moving LayeredNavigation above the toolbar. I have tried this with no luck. <move element="catalog.leftnav" destination="content" before="-"/> <move element="catalog.leftnav" destination="category.products" before="-"/> <move element="catalog.leftnav" destination="category.products.list" before="-"/> <move element="catalog.leftnav" destination="category.view.container" before="-"/> None of this worked although you above solution worked(which bring the layered navigation below toolbar). what am i doing wrong – Arun Karnawat Aug 5 '16 at 5:34
  • It worked on category page, but did not worked on search page. – Arun Karnawat Aug 5 '16 at 6:13
  • 1
    @Arun, idk why no, but for me works perfectly :) Just add this line from comment in your theme in catalog_category_view_type_layered.xml – Matej Đaković Oct 18 '16 at 10:44
1

This is answer to show to move Layered navigation above product toolbar using layout xml. Create a file in your theme in Magento_LayeredNavigation module catalog_category_view_type_layered.xml as below -

    <referenceContainer name="content">
        <container name="catalog-leftnav-top" as="catalog-leftnav-top" htmlTag="div" htmlClass="catalog-leftnav-top" before="category.products"/>
    </referenceContainer>
    <move element="catalog.leftnav" destination="catalog-leftnav-top" before = "-"/>
0

Finally the short answer, for those who are struggling with this confusing answers like me:

copy

"{magento-folder}\vendor\magento\module-catalog\view\frontend\layout\catalog_category_view.xml"

to

"{magento-folder}\app\design\frontend\{yourVendor}\{yourTheme}\Magento_Catalog\layout\catalog_category_view.xml"

and add the line <move element="catalog.leftnav" destination="category.product.list.additional" before="-"/> inside this file right under the <body> - tag

<body>
<move element="catalog.leftnav" destination="category.product.list.additional" before="-"/>
    <referenceContainer name="columns.top">
        <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
            <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/>
            <block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
            <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>
        </container>
    </referenceContainer>

If you use 3-column-view and you don´t have another widgets/content in the sidebar.main it could be possible, that the sidebar and 3-column-view disappears because there is no other content and magento removes empty columns/div etc.

0

I tried all the options above and none of them worked for putting the layered nav above the toolbar. What finally worked for me was to add code in:

"{magento-folder}\app\design\frontend\{yourVendor}\{yourTheme}\Magento_Catalog\layout\catalog_category_view.xml"

The code:

<body>
<move element="catalog.leftnav" destination="content.top" />

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.