2

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>
Improve this question

1 Answer 1

Reset to default
1

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>
Improve this answer
3
  • 1
    Thanks I have tried that. It works but, changing the order it appears on the page with before="page.main" doesn't seem to work. I can't work out why. Have updated the code in my original question.
    – caffeinehigh
    Commented Apr 12, 2016 at 9:26
  • Ok, I have worked this out. I should have been using before="main.content" and not before="page.main" Mystery solved :)
    – caffeinehigh
    Commented Apr 12, 2016 at 9:48
  • That's great. I've changed my answer so others can see how it should be.
    – Miroslav Petroff
    Commented Apr 12, 2016 at 11:17

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.