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.

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|||||
  • Thanks Aarom, div's element added before section, but how I can add the section in between both div elements. – mageDev0688 Mar 21 '17 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 '17 at 10:24
  • Thanks the after and before is working fine but I want html structure like this: please see here. – mageDev0688 Mar 21 '17 at 10:40
  • Check the updated answer. – Aaron Allen Mar 21 '17 at 22:57
  • Thanks, it's working fine for breadcrumbs div, but not for section element. please see this snap – mageDev0688 Mar 22 '17 at 6:45

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.