Crear temas, bloques y plantillas propias con Magento 2

Adobe ha comunicado que en junio de 2020 dejaría de dar soporte a la versión de Magento 1, por lo que la migración a Magento 2 es necesaria e imprescindible. Pero Magento 2 ha cambiado la forma de trabajar y de estructura de archivos con respecto a la anterior versión, en está ocasión vamos a ver de forma básica e introductoria como crear nuestro propio theme, nuestro propio block, template y como sobrescribir xml para un ecommerce desarrollado en Magento 2.

Crear nuestro primer theme

Para ello comenzaremos creando dentro de app/desing/frontend el directorio. Dentro de dicho directorio crearemos el del theme que llamaremos simpletema, quedando el path completo de la siguiente forma 

app/design/frontend/W2e/simpletema

Después de esto lo siguiente es definir nuestro tema. Para ello hay que usar el archivo theme.xml, este xml irá dentro de la carpeta simpletema

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>W2e Simple Tema</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Aclarar que la etiqueta parent se utiliza para heredar la funcionalidad del tema blank, de no ser así habría que crear un tema completamente desde el principio.

A continuación registramos nuestro tema con registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/W2e/simpletema',
    __DIR__
);

Recordar que estamos extendiendo el tema de Magento/blank, Magento tiene un tema creado por defecto llamado Luma que también extiende del tema blank, blank es como el tema base en Magento 1. En este caso para el ejemplo heredamos del tema Blank pero aclarar que se puede heredar de cualquier tema de Magento que ya haya instalado ya sea los que tiene Magento por defecto instalado o algún tema nuevo que hayamos creado o comprado.

Ya podemos ver nuestro tema en la configuración de Magento

y ya tendríamos nuestro tema creado listo para ser usado. Para activarlo habría que ir a Content/Configuration y cambiar el tema por defecto por el nuestro

Crear nuestro primer módulo

Vamos a ver la creación de un módulo, para ello dentro de app/code hay que crear el Vendor, en este caso W2e y dentro el nombre de nuestro módulo, SimpleModulo por lo que la ruta final queda como app/code/W2e/SimpleModulo

En Magento2 cambia la forma de crear un módulo, a continuación hay que crear un archivo registration.php en la raíz del módulo, esto servirá a Magento para inscribir nuestro módulo en su listado

<?php
 
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'W2e_SimpleModulo',
    __DIR__
);
?>

Y agregaremos también el composer.json

{
    "name": "w2e/magento2-simplemodulo",
    "description": "Magento2 simple modulo",
    "type": "magento2-module",
    "version": "1.0.0",
    "authors": [
        {
            "name": "Way2 Ecommerce",
            "email": "info@way2ecommerce.com"            
        }
    ],
    "minimum-stability": "dev",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/framework": "100.0.*"
    },
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "psr-4": {
            "W2e\\SimpleModulo\\": ""
        },
        "files": [
            "registration.php"
        ]
    }
}

y en la carpeta etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="W2e_SimpleModulo" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Store"/>
        </sequence>
    </module>
</config>

Ahora tan solo queda activarlo, para ello vamos a hacerlo a través de la consola y en la raíz de Magento ejecutaremos

bin/magento module:enable W2e_SimpleModulo

y obtendremos

The following modules have been enabled:The following modules have been enabled:
- W2e_SimpleModulo

To make sure that the enabled modules are properly registered, run 'setup:upgrade'.
Cache cleared successfully.
Generated classes cleared successfully. Please run the 'setup:di:compile' command to generate classes.
Info: Some modules might require static view files to be cleared. To do this, run 'module:enable' with the --clear-static-content option to clear them.

y ya está, ya tenemos nuestro módulo creado en Magento2 :) eso sí no tiene ninguna funcionalidad.

Una manera útil y rápida para crear estructuras de módulos en Magento 2 es usar generadores de módulos como el que podemos encontrar en https://mage2gen.com/, pero para usar ese generador es importante tener claros los conceptos y la estructura de lo que se quiere en un módulo de Magento2.

Crear un bloque y un template para Magento2

Ya hemos creado un tema y un módulo desde cero, ahora vamos a ver cómo crear un bloque y posteriormente añadirle nuestro template personalizado también.

El bloque hay que crearlo dentro de nuestro modulo, en el directorio Block y lo llamaremos "view/frontend/templates/basico.phtml"

<?php
namespace W2e\SimpleModulo\Block;
 
use Magento\Framework\View\Element\Template;
 
/**
 * Basico SimpleModulo content block
 */
class Basico extends Template
{
 
    /**
     * @param Template\Context $context
     * @param array $data
     */
    public function __construct(Template\Context $context, array $data = [])
    {
        parent::__construct($context, $data);
        $this->_isScopePrivate = true;
    }
 
    /**
     * Devolveremos un texto simple
     *
     * @return string
     */
    public function getTextoBloque()
    {
        return 'Aqui devolvemos un texto simple pero previamente se pueden desarrollar mas cosas como variables o layouts';
    }
 
}
?>

Ahora generaremos el phtml donde cargamos la información de nuestro bloque. La ruta para ello será desde nuestro módulo view/frontend/templates

<h1><?php echo __('Bloque basico personalizado') ?></h1>
<p><?php echo __('Bloque de prueba.') ?></p>
<p><?php echo $block->getTextoBloque(); ?></p>

y por último se indica en el  view/frontend/layout/default.xml donde queremos que se inserte

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>        
    </head>
    <body>
        <referenceContainer name="content">
            <block class="W2e\SimpleModulo\Block\Basico" template="W2e_SimpleModulo::basico.phtml" />
        </referenceContainer>
    </body>
</page>

Limpiamos caches y ya podemos ver en el frontend nuestro bloque

Extender XML para añadir un bloque

Extender un xml si queremos realizar modificaciones de diseño, así Magento leerá directamente nuestro xml modificado. En este caso vamos a extender el xml de la vista de un producto

Copiamos el xml base de

vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml

y lo pegamos en

app\design\frontend\W2e\simpletema\Magento_Catalog\layout\catalog_product_view.xml

Entonces por ejemplo si queremos insertar un bloque CMS

 <block class="Magento\Cms\Block\Block" name="texto_certificados">
                <arguments>
                    <argument name="block_id" xsi:type="string">texto_certificados</argument>
                </arguments>
            </block>

Al usar el xml de product view quedaría así y nuestro bloque saldría en todos los productos

        <referenceBlock name="product-view-wrapper">
            <!-- Static blocks -->
            <block class="Magento\Cms\Block\Block" name="block_product_shipping_info">
                <arguments>
                    <argument name="block_id" xsi:type="string">block_product_shipping_info</argument>
                </arguments>
            </block>
            <block class="Magento\Cms\Block\Block" name="texto_certificados">
                <arguments>
                    <argument name="block_id" xsi:type="string">texto_certificados</argument>
                </arguments>
            </block>
        </referenceBlock>

y ya está, con esto tendríamos unos pasos básicos para empezar con magento2.