Magento – Magento2: Move an element inside an existing element with XML Layout

magento2

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?

Best Answer

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.

Related Topic