Crear un bloque en Magento 2

¿Que es un bloque en Magento?

Los bloques en Magento son la parte lógica que se usará para mostrar la plantilla en nuestro diseño. Un bloque normalmente tiene dos partes: La parte «visual» que es la plantilla phtml o la salida directa, y la otra parte es la «lógica» necesaria para montar dicha plantilla o salida.

Una de las funciones que hacen a Magento uno de las mejores plataformas ecommerce es su gran versatilidad a la hora de posicionar, mover, borrar o modificar Bloques. A nivel de desarrollo Magento nos permite crear bloques en módulos totalmente atómicos sin necesidad de modificar ni una línea de core.

Creación del módulo

Para realizar un ejemplo sencillo de como crear un módulo Magento 2 con un bloque, vamos a centrarnos en mostrar un atributo con un tratamiento especial en la página de producto. Por ejemplo vamos a visualizar la marca o fabricante del producto entre el título y la descripción de éste. Además vamos a aprovechar para hacer el marcado de schema.org.

Los archivos y estructura necesaria para nuestro bloque serán:

app/code/Comerline/Utilities/Block/Manufacturer.php
app/code/Comerline/Utilities/etc/module.xml
app/code/Comerline/Utilities/registration.php
app/code/Comerline/Utilities/view/frontend/layout/catalog_product_view.xml
app/code/Comerline/Utilities/view/frontend/templates/manufacturer.phtml

Pasamos a detallar cada uno de los archivos y ver su funcionalidad:

app/code/Comerline/Utilities/etc/module.xml

module.xml contiene la configuración del módulo. Básicamente su versión y su nombre.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Comerline_Utilities" setup_version="1.0.0" />
</config>

app/code/Comerline/Utilities/registration.php

Archivo para registrar nuestro módulo en Magento.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Comerline_Utilities',
    __DIR__
);

app/code/Comerline/Utilities/Block/Manufacturer.php

Aquí tenemos la lógica del bloque. En el obtenemos el producto actual y obtenemos el valor Frontend del atributo Manufacturer para poder retornarlo a la vista.

<?php

namespace Comerline\Utilities\Block;

class Manufacturer extends \Magento\Framework\View\Element\Template {

    /**
     * Core registry
     *
     * @var \Magento\Framework\Registry
     */
    protected $_coreRegistry;

    public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
            \Magento\Framework\Registry $registry
    ) {
        parent::__construct($context);
        $this->_coreRegistry = $registry;
    }
    
    /**
     * Retrieve current product object
     *
     * @return \Magento\Catalog\Model\Product
     */
    public function getProduct()
    {
        return $this->_coreRegistry->registry('current_product');
    }
    

    /**
     * Retrieve the Product Manufacturer
     * @return string
     */
    public function getManufacturer() {
        $product = $this->getProduct();
        return $product->getResource()->getAttribute('manufacturer')->getFrontend()->getValue($product);
    }

}

app/code/Comerline/Utilities/view/frontend/templates/manufacturer.phtml

En manufacturer.phtml tenemos la plantilla del Bloque. Como podéis comprobar podemos llamar a funciones del Bloque mediante la variable $block.

<div class="product-view-wrap-manufacturer">
    

<div class="manufacturer-info manufacturer-<?php echo strtolower($block->getManufacturer()); ?>">
    </div>


    

<div class="brand" itemprop="brand" itemscope itemtype="http://schema.org/Brand">
        

<h2 itemprop="name"><?php echo strtolower($block->getManufacturer()); ?></h2>


    </div>


</div>

app/code/Comerline/Utilities/view/frontend/layout/catalog_product_view.xml

Por último vamos a modificar el layout catalog_product_view.xml para incluir nuestro bloque. Concretamente lo vamos a introducir en box.inner1 después del product.info.overview.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="box.inner1">
        <block class="Comerline\Utilities\Block\Manufacturer" name="manufacturer_product" template="Comerline_Utilities::manufacturer.phtml" before="product.info.overview"/>
    </referenceContainer>
</page>    

Una vez terminado todo el proceso deberemos ejecutar desde consola:

bin/magento module:enable Comerline_Utilities
bin/magento setup:upgrade
bin/magento setup:di:compile

Con ésto nuestro módulo estará funcional y mostrará la marca en la página del producto.