Magento2: How to set product wise different layout

magento.stackexchange https://magento.stackexchange.com/questions/232659

Question

I have Two product. Both are Downloadable. I want different layout for both product.

Except below concept:

catalog_product_view_id_1.xml

The second concept I am using is with help of observer, But also this one is not working. Below are my code. Please see and let me know if any change.

Path: etc/event.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="layout_load_before">
    <observer name="catalog_product_view_extension" instance="Custom\Extensionlayout\Observer\LayoutLoadBefore" />
</event>
</config>

Path: Observer/LayoutLoadBefore.php

<?php

namespace Custom\Extensionlayout\Observer;

class LayoutLoadBefore implements \Magento\Framework\Event\ObserverInterface
{
/**
 * @var \Magento\Framework\Registry
 */
protected $_registry;

public function __construct(
   \Magento\Framework\Registry $registry
)
{
    $this->_registry = $registry;
}


public function execute(\Magento\Framework\Event\Observer $observer)
{
    $product = $this->_registry->registry('current_product');


    //echo ; die;

    if (!$product){
      return $this;
    }
    if($product->getName() == 'book2'){ // your condition


       $layout = $observer->getLayout();
       $layout->getUpdate()->addHandle('catalog_product_view_extension');
    }

    return $this;
}
}

And here is my custom layout path: view/frontend/layout/catalog_product_view_extension.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="page.main.title" remove="true"/>
    <referenceBlock name="product.info.overview" remove="true"/>
    <referenceBlock name="product.price.final" remove="true"/>
    <referenceBlock name="product.price.tier" remove="true"/>
    <referenceBlock name="product.info.stock.sku" remove="true"/>
    <referenceBlock name="product.info.review" remove="true"/>
    <referenceBlock name="product.info.addtocart.additional" remove="true"/>
    </body>
    </page>

Here what happens, Observer is getting called but my custom handler not rendered. Anyone did this kind of change. Please suggest.

Was it helpful?

Solution

Yes you can achieve this thing by writing small code

What you can do is add add layout via event layout_load_before, you can use this event to add your dynamic layout.

Here is sample code for you, please modify as per your need

what you can do is create events.xml in your module

[Vendor]/[Module]/etc/frontend/events.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <!-- for diffrentiate layout.xml on product basis -->
    <event name="layout_load_before">
        <observer name="load_custom_handler" instance="[Vendor]\[Module]\Observer\LayoutLoadBefore" />
    </event>
</config>

In your [Vendor]\[Module]\Observer\LayoutLoadBefore.php file write below code

<?php

namespace [Vendor]\[Module]\Observer;

class LayoutLoadBefore implements \Magento\Framework\Event\ObserverInterface
{
    /**
     * @var \Magento\Framework\Registry
     */
    protected $registry;

    public function __construct(
       ............
       \Magento\Framework\Registry $registry,
       ............
    ){
        $this->registry = $registry;
    }


    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $product = $this->registry->registry('current_product');

        if (!$product) {
          return $this;
        }
        if ($product->getMyvalue()) { // your condition
           $layout = $observer->getLayout();
           $productId = $product->getId(); 
           $layout->getUpdate()->addHandle("my_downlodable_view_id_$productId");
        }

        return $this;
    }
}

And now go to [Vendor]\[Module]\view\frontend\layout\my_downlodable_view_id_yourProductId.xml file and write your code.

This file only added to your specific condition of product

OTHER TIPS

Create new layout file inside your theme scope

The name of layout file will be:

catalog_product_view_id_number and we’ll place it in:

app/design/frontend/VendorName/ThemeName/Namespace_Module/layout/catalog_product_view_id_number.xml
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top