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.

asked Jun 9, 2016 at 10:17
2
  • 4th move element does not start properly move element="catalog.navigation.state" Commented Jun 9, 2016 at 10:38
  • That was just a copy and paste error, i'm still not able to see the filter. Thanks Commented Jun 9, 2016 at 11:30

6 Answers 6

5

The solution i came up with is as follows:

<move element="catalog.leftnav" destination="category.product.list.additional" before="-"/>
answered Jun 10, 2016 at 14:22
4
  • 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 Commented Aug 5, 2016 at 5:34
  • 1
    It worked on category page, but did not worked on search page. Commented Aug 5, 2016 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 Commented Oct 18, 2016 at 10:44
  • 1
    @ArunKarnawat, to make this work in search page, you need to use <move element="catalogsearch.leftnav" destination="content">, by using catalogsearch.leftnav instead of catalog.leftnav. Commented Dec 30, 2019 at 3:23
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 = "-"/>
answered May 10, 2017 at 9:49
1

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" />
answered May 31, 2018 at 21:24
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.

answered Mar 8, 2018 at 9:44
0

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="-"/>
answered Sep 18, 2020 at 9:15
0

To moving the navigation state/leftnav under the toolbar.

  1. Page category
  • Override the layout catalog_category_view.xml in your theme path and add
<container name="category.product.list.additional" as="additional" />

inside of block name="category.products.list"

  • Move catalog.navigation.state or catalog.leftnav by this way to category.product.list.additional in the same layout.
<move element="catalog.navigation.state" destination="category.product.list.additional" />
  1. Page categorySearch
  • Override the layout catalogsearch_result_index.xml in your theme path add
<block class="Amasty\Shopby\Block\Navigation\State" name="catalogsearch.navigation.state.search" as="state_search" />

inside of block name="category.products.list"

  • update template of the block with name category.products.list (Magento_Catalog::product/list.phtml) and add this code <?= /* @noEscape */ $block->getChildHtml('state_search') ?> under <?= $block->getToolbarHtml() ?>

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.