Moving layered navigation below product toolbar in layout.xml

magento.stackexchange https://magento.stackexchange.com/questions/322551

Question

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.

Was it helpful?

Solution

The solution i came up with is as follows:

<move element="catalog.leftnav" destination="category.product.list.additional" before="-"/>

OTHER TIPS

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 = "-"/>

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

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.

The solution i came up with is as follows:

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

<move element="sidebar.main" destination="content" after="-"/>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top