1

I am trying to move the layered navigation to somewhere specific on the page.

Here is the layout XML at Magento_LayeredNavigation/page_layout/1column.xml:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <move element="catalog.leftnav" destination="content" after="-"/>
</layout>

And this works fine, it moves the layered navigation into the content area. However I want to move the layered navigation into here (category.products):

<referenceContainer name="content">
            <block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml">

Changing the layout XML at Magento_LayeredNavigation/page_layout/1column.xml to this doesn't work:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <move element="catalog.leftnav" destination="category.products" after="-"/>
</layout>

Can anyone tell me the correct way to move an element inside an existing element?

Improve this question
1
  • Please accept an answer if it has worked for you.
    – Max
    Feb 16, 2017 at 9:27

3 Answers 3

Reset to default
2

You can move things very simple by using XML.

In your theme or plugin file, respective cms_index_index.xml for cms homepage for example, just use this one-liner:

    <move element="register-link" destination="header.links" before="contact-link" />

You can use before="-" or after="-" to place the element before or after the destination. Both are not mandatory for move in order to work.

Improve this answer
1

Please follow below step to change position of layered navigation:

1) Override magento2\vendor\magento\module-layered-navigation\view\frontend\layout\catalog_category_view_type_layered.xml add below code after sidebar.main referenceContainer. 

<referenceContainer name="category.products">
     <block class="Magento\LayeredNavigation\Block\Navigation\Category" name="catalog.leftnavs" as="catalog_leftnav" before="-" template="layer/view.phtml">
        <block class="Magento\LayeredNavigation\Block\Navigation\State" name="catalog.navigation.states" as="state" />
        <block class="Magento\LayeredNavigation\Block\Navigation\FilterRenderer" name="catalog.navigation.renderers" as="renderer" template="layer/filter.phtml"/>
     </block>
</referenceContainer>

2) magento2\vendor\magento\module-layered-navigation\view\frontend\page_layout\1column.xml add category.products instead of content.top

3) override magento2\vendor\magento\module-catalog\Block\Category\View.php and add below code

public function getCatalogLeftNavHtml()
{
    return $this->getChildHtml('catalog_leftnav');
}

4) last override magento2\vendor\magento\module-catalog\view\frontend\templates\category\products.phtml add below code

<?php echo $block->getCatalogLeftNavHtml(); ?>
Improve this answer
1

First of all, I suggest you this tool for easy customize the layout and template: https://github.com/vpietri/magento2-developer-quickdevbar

By using this tool, we can find the layout handle quickly, with priority. enter image description here

Follow the image above, product_filter_toolbar is the strongest. So we will put your XML to that file: product_filter_toolbar.xml (May be different from your case). We should update the layout base on the layout handle, do not update on 1column.xml as yours.

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <body>
        <move element="catalog.leftnav" destination="category.products" after="-"/>
    </body>
</layout>
Improve this answer

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.