Crear temas, bloques y plantillas propias con Magento 2
=======================================================

Magento2 es imprescindible y la creación de temas bloques etc puede volverse complicado al principio
----------------------------------------------------------------------------------------------------

 

 

    By Way2 Ecommerce  

 

   14 Nov 2019  · Actualizado: 10 Mar 2021 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](https://way2ecommerce.com/magento-ecommerce) 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*

![magento 2 tema](/sites/default/files/inline-images/imagen1.png)

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

```xml
<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*

```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

![back magento2](/sites/default/files/inline-images/imagen2.png)

![back magento2](/sites/default/files/inline-images/imagen3.png)

![back magento2](/sites/default/files/inline-images/imagen4.png)

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

![back magento](/sites/default/files/inline-images/imagen6.png)

**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

![estructura modulo magento2](/sites/default/files/inline-images/imagen5.png)

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
<?php
 
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'W2e_SimpleModulo',
    __DIR__
);
?>
```

Y agregaremos también el composer.json

```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
<?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
<?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

```php
<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
<?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

![back magento](/sites/default/files/inline-images/imagen7.png)

**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

```xml
 <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

```xml

        <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.

   Way2 EcommerceExpertos en Magento ecommerce. Definimos, desarrollamos, mantenemos y potenciamos tiendas online de la más alta calidad para que tu ecommerce supere todas tus expectativas.

 

 

 

 Otras entradas