Magento – How to add breadcrumbs in product category and product details page in Magento 2

breadcrumbsmagento2

I have added the following code to the following file.

app/design/frontend/Emthemes/everything/diamond/Magento_Catalog/layout/default.xml

<move element="breadcrumbs" destination="content" before="-" />

But it's not working for me.
Anyone can help me regarding this.

Best Answer

as @Suresh Chikani mentioned in the comment, breadcrumbs are displayed OOTB in those places(product page & category), if it's not then somebody removed it.

It could be removed in few ways

1) somebody removed the parent block in which the block containing your functionality was, in this case just "move" the block containing your desired functionality to a different existing block/container

2) somebody removed the block, you need to find the code and change it or add a new block as you done in your answer.

3) Somebody could rewrite the block class (Magento\Theme\Block\Html\Breadcrumbs) itself and override the toHtml function or any other that is responsible for displaying content. Look in

di.xml

for

Magento\Theme\Block\Html\Breadcrumbs

if nothing is found then no one rewritten it.

4) Somebody could rewritten

vendor/magento/module-theme/view/frontend/layout/default.xml

Where the setup of breadcrumbs originally takes place.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/layout-override.html

And going back to your question, if you want only add it only category & product page then you should add it to

catalog_product_view.xml
catalog_category_view.xml

not to default.xml

Related Solutions

Magento – Magento 2: How to move category description to main column

Personally I did it this way:

<move element="category.description" destination="category.image" />

And then inside:

Magento_Catalog/templates/category/image.phtml

Called:

<?php echo $block->getChildHtml('category.description'); ?>

Because I wanted it inside the image, but you could put it just below instead.

I'm sure there's a better way but can't check atm.

Magento – Magento 2 customizing category page

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>

Best Answer

Related Solutions

Magento – Magento 2: How to move category description to main column

Magento – Magento 2 customizing category page

Related Topic