Magento 2 XML Layout – Move Element Not Working

categorylayoutmagento2xml

I am editing my theme default.xml in a child theme I have created. Which sits in mytheme\Magento_Catalog\layout\default.xml This file works fine as parts of what I have done does work. Basically what I have done is created a new container category.header and then thrown category.image and page.main.title in it. This works as I can see the items in the new container in my category pages.

The bit that doesn't work that is driving me mad is moving the new container, category.header. Moving the element just doesn't seem to have an affect. All I want to do is move it below the nav and above the main content. Can anyone spot why?

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header-wrapper">
            <container name="compare-link-wrapper" label="Compare Link Wrapper" as="compare-link-wrapper" after="top.search" htmlTag="ul" htmlClass="compare wrapper">
                <block class="Magento\Framework\View\Element\Template" name="catalog.compare.link" before="-" template="Magento_Catalog::product/compare/link.phtml">
                    <arguments>
                        <argument name="jsLayout" xsi:type="array">
                            <item name="components" xsi:type="array">
                                <item name="compareProducts" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Catalog/js/view/compare-products</item>
                                </item>
                            </item>
                        </argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>

        <referenceContainer name="page.wrapper">
          <container name="category.header" as="categoryHeader" htmlTag="div" htmlClass="category-header" before="page.main" />
        </referenceContainer>

        <move element="category.image" destination="category.header" />
        <move element="page.main.title" destination="category.header" />

        <move element="breadcrumbs" destination="columns.top" after="category.image" />

        <referenceBlock name="catalog.compare.sidebar" remove="true"/>

    </body>
</page>

Best Answer

Why you don't reference the page.wrapper container and create category.header inside:

<referenceContainer name="page.wrapper">
    <container name="category.header" as="categoryHeader" htmlTag="div" htmlClass="category-header" before="main.content" />
</referenceContainer>
Related Topic