Magento2 – Create Block on Product Page via XML

magento2product

I have created a phtml file which I want to add to my product pages.

I know that there are two containers at the top which are product.info.media and product.info.main. Then there is product.info.details, the area where the tabs are and the description starts (product.info.description).

My problem: I can't reference the exact spot where I want to place my block. It is supposed to be displayed just between the two div classes product media and product info detailed.

I have tried

<referenceContainer name="product.info.media">
    <container name="product.info.afterprice" after="-" label="Product info afterprice" htmlTag="div" htmlClass="product-info-after-price">
        <block class="Magento\Framework\View\Element\Template" name="product-extra"  template="Magento_Theme::html/added/product-extra.phtml" />
    </container>
</referenceContainer>

<move element="product.info.afterprice" destination="product.info.details" before="-" />

but never shows where I want it to be. How can I reference the main product content area and say after="product.info.media" or before="product.info.details"?

Best Answer

Add below code to app/design/frontend/{{vendor}}/{{companyname}}/Magento_Catalog/layout/catalog_product_view.xml file

<referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template" after="product.info.media" name="product-extra" template="Magento_Theme::html/added/product-extra.phtml"/>
</referenceContainer>

If you will add my solution on your catalog_product_view.xml file then you will not required to move it.

Related Solutions

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>

Magento – Creating a new container and placing it where I want in Magento 2

Like Quisse said it's hard to give an accurate answer without knowing the full details, but this may help:

after and before only work when the block you're moving/declaring and the block you're positioning it before/after share the same parent.

For example if you have this structure:

Block A
- Block B
- Block C
Block D
- Block E

If you tried to set block E after block B nothing would happen as they don't share the same parent. But if you tried to set block C to display before block B it would work.

The exception for this is when blocks are rendered via getChildHtml() in a template file, in which case you can only move it by changing the template.

Also, you need to add a hyphen if you want to display it before/after everything. after="-" and before="-"

Update

Adding

I have added a block to content.bottom and it works as expected:

<referenceContainer name="content.bottom">
    <block class="Magento\Framework\View\Element\Template" name="test" template="Magento_Theme::test.phtml" />
</referenceContainer>

Moving

I've also tried moving my custom related products to content.bottom and this works fine:

<move element="catalog.product.related.tab" destination="content.bottom" after="-" />

It doesn't appear to be an XML issue, could it be a CSS issue?

Best Answer

Related Solutions

Magento – Magento 2 customizing category page

Magento – Creating a new container and placing it where I want in Magento 2

Update

Related Topic