Personalizar el layout por tipo de producto en Magento2

Definición de layout

Ayer comentaba cómo podemos crear un tipo de producto custom cuando los productos nativos y sus no pocas opciones no resultan suficientes. En el ejemplo siguiente voy a mostrar cómo personalizar el layout de un tipo de producto dado (usando el tipo de producto creado ayer como ejemplo).

Nuevamente, vamos a meter mano en Barbanet_SampleModule para agregar funcionalidad.

Primer paso, crear un bloque que usaremos para inyectar algún contenido. En mi caso, he creado el bloque Block/Product/Type/Sample/Basic.php con la siguietne definición.

<?php
 
namespace Barbanet\SampleModule\Block\Product\Type\Sample;
 
use Magento\Catalog\Block\Product\AbstractProduct;
 
/**
 * Basic content block
 */
class Basic extends AbstractProduct
{
 
    /**
     * Returns a dummy string.
     *
     * @return string
     */
    public function getCustomProductMessage()
    {
        return 'Custom content from: ' . __METHOD__;
    }
}

Luego, el archivo phtml que usaremos para mostrar el contenido. En este caso he creado view/frontend/templates/product/type/sample/basic.phtml.

<div class="block block-sample-data">
    <h4>Custom Product type with custom block and template</h4>
    <p><?php echo $block->getCustomProductMessage(); ?></p>
</div>

Y ahora, creamos el archivo de layout que será el encargado de aplicar la modificación: view/frontend/layout/catalog_product_view_type_sample.xml

Básicamente, estoy indicando que es un upgrade de layout para el Product view, pero será sólo para el tipo de producto Sample (el que había creado ayer). Es el _type_sample lo que nos permite indicar para que tipo de producto se aplicará.

En el archivo, he agregado algo muy sencillo:

<?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>
        <referenceContainer name="content">
            <block class="Barbanet\SampleModule\Block\Product\Type\Sample\Basic"
                   name="product.info.sample.example"
                   template="Barbanet_SampleModule::product/type/sample/basic.phtml"
                   before="-">
            </block>
        </referenceContainer>
    </body>
</page>

Actualizamos cache y vamos al frontend. Por ejemplo, en mi categoría tengo dos productos.

Vista de categoría

El primero que revisaré será mi producto simple.

Vista de producto simple

Aquí todo normal. Pero si reviso mi producto de tipo Sample.

Vista de producto sample

Efectivamente, se ha agregado el bloque en la parte superior, tal cual la definición.

Vista de producto sample

Lo comentado en el post sobre el módulo Barbanet_SampleModule está disponible en GitHub bajo el tag 2.21.0.

Unite a la lista de suscriptores

Una vez por mes vas a recibir un mail con contenido que se relaciona con lo que vemos en el blog, que extiende o anticipa lo que hacemos en Twitch, y que también suele incluir anécdotas del MundoReal® y algún que otro link.

Es gratis, no tiene publicidad y con el double opt-in de Mailchimp.