Magento2 – How to Add Custom Block to Products Page

attributesmagento2product

I'm looking to add custom product attributes to the product page. Basically adding a block under the title to list product attributes.

I looked at echoing out the attributes in

Magento_Catalog/templates/product/view/attributes.phtml

file but that seemed messy. So I was hoping there'd be a way to add a custom block to the xml and then rendering my own .phtml file? That way I'm keeping the core code seperate from my own (obviously I'm adding all this into my own theme files and not touching the vendor files.)

Would this be possible and/or the best way?

Best Answer

In app\code\Namespace\Modulename\view\frontend\layout\catalog_product_view.xml add like below code. You can use your required referenceContainer

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="alert.urls">
            <block class="Namespace\Modulename\Block\Catalog\Product\View\Module" name="textblock" as="textblock" after="-" template="catalog/product/view/textblock.phtml" />
        </referenceContainer>
    </body>
</page>

Related Solutions

Magento – Custom Product Page Design and Options

If you want to customize your product view for every products then in YOURTHEME/layout/local.xml add :

<catalog_product_view>
    <!-- Allow you to change the global structure of the page -->
    <reference name="root">
        <action method="setTemplate"><template>page/your-custom-layout.phtml</template></action>
    </reference>
    <!-- Allow you to change the content of the product area -->
    <reference name="product.info">
        <action method="setTemplate"><template>catalog/product/your-custom-view.phtml</template></action>
    </reference>
</catalog_product_view>

Feel free to do all the changes you want through local.xml with the catalog_product_view handler.

Then create YOURTHEME/template/page/your-custom-layout.phtml based on template/page/1column.phtml (for example)

And create YOURTHEME/template/catalog/product/your-custom-view.phtml based on template/catalog/product/view.phtml

Magento – Magento 1.9 Product page customization

You can use the exactly same approach that is used for "Fabricante" You just need to change the attribute code for the new one, in the right template ie:

app/design/frontend/{package}/{theme}/templates/catalog/product/view.phtml

<div class="product-sarasa">
    <?php echo $_helper->productAttribute($_product, $_product->getSarasa(), 'sarasa') ?>
</div>

To find the right template file just activate "template hints" in:

System > Configuration > Advanced - Developer > Debug > Template Path Hints.

Best Answer

Related Solutions

Magento – Custom Product Page Design and Options

Magento – Magento 1.9 Product page customization

Related Topic