0

I want to customize the category page and I am using the below file path:

app\design\frontend\Vendor\Theme\Magento_Catalog\layout\catalog_category_view.xml

Below is xml file code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="page.top">
         <block class="Magento\Catalog\Block\Category\View" name="category_banner" template="category/banner.phtml" ifconfig="porto_settings/category/category_description" before="-"/>   
    </referenceContainer>
    <referenceContainer name="content">
        <block class="Magento\Catalog\Block\Category\View" name="category_desc_main_column" template="category/desc_main_column.phtml" ifconfig="porto_settings/category/category_description" before="category.products"/>
    </referenceContainer>
    <move element="category.image" destination="content" before="category_desc_main_column"/>
    <referenceContainer name="sidebar.main">
    </referenceContainer>
    <referenceContainer name="sidebar.additional" remove="true" />
</body>

I have gone to the admin panel and Enabled Template Path Hints for Storefront but I can't find any file which I can add my custom element before section element.

When I go to the inspect element it's creating the below HTML structure:

inspect element

I want to move the breadcrumbs div in the section and want to add two new DIV's before section element.

How I can edit the catalog_category_view.xml file code. Please help.

Improve this question

1 Answer 1

Reset to default
0

To add two new divs before the section element try this layout xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.top">
            <container name="div-one" before="navigation.sections" htmlTag="div" htmlClass="div-one">
                <block class="Magento\Framework\View\Element\Text">
                    <arguments>
                        <argument name="text" xsi:type="string">One</argument>
                    </arguments>
                </block>
            </container>
            <container name="div-two" before="navigation.sections" htmlTag="div" htmlClass="div-two">
                <block class="Magento\Framework\View\Element\Text">
                    <arguments>
                        <argument name="text" xsi:type="string">Two</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

You can move the breadcrumbs into navigation-sections like this:

<move element="breadcrumbs" destination="store.menu"/>

However, there's a css rule that prevents it from displaying so you need to make a new rule for it:

.nav-sections .breadcrumbs {
    display: block;
}

Update

Here how to get nested divs with breadcrumbs and sections inside.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.top">
            <container name="divone" htmlTag="div" htmlClass="divone">
                <container name="divtwo" htmlTag="div" htmlClass="divtwo">
                </container>
            </container>
        </referenceContainer>

        <move element="navigation.sections" destination="divtwo"/>
        <move element="breadcrumbs" destination="divtwo" before="navigation.sections"/>
    </body>
</page>
Improve this answer
7
  • Thanks Aarom, div's element added before section, but how I can add the section in between both div elements.
    – mageDev0688
    Mar 21, 2017 at 10:16
  • you would put after="navigation.sections" instead of before="navigation.sections" for the one that is below section.
    – Aaron Allen
    Mar 21, 2017 at 10:24
  • Thanks the after and before is working fine but I want html structure like this: please see here.
    – mageDev0688
    Mar 21, 2017 at 10:40
  • Check the updated answer.
    – Aaron Allen
    Mar 21, 2017 at 22:57
  • Thanks, it's working fine for breadcrumbs div, but not for section element. please see this snap
    – mageDev0688
    Mar 22, 2017 at 6:45

Your Answer

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

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