Cómo crear un módulo en Magento 2 – parte 2

Antes de continuar te recomendamos que leas la primera parte de este artículo: “Crear un módulo en Magento 2 – Parte 1”. Si ya lo has hecho, estás en el sitio correcto. En el artículo anterior, vimos los fundamentos para crear un módulo en Magento 2, con las apreciables diferencias que hay entre la versión 1 y 2. En esta segunda parte vamos a realizar las operaciones siguientes, que en general son mucho más parecidas a Magento 1 pero que requieren un pequeño estudio.

Las operaciones básicas para la creación de contenido visible en el frontend serán crear el controlador (controller) que recibirá la llamada de la URL y la procesará, crear un bloque (block) que contendrá las clases y sus métodos para la ejecución en el front y crear los archivos para que sean visibles en el front de la página. Vamos a ello.

Cómo crear un controller en Magento 2

El controller es quien se encargará de recibir la URL y saber qué hacer con ella, para lo cual lo primero que debemos es indicar a Magento cuál es nuestra URL. Siguiendo los pasos del artículo anterior, debemos crear el archivo routes.xml dentro de la carpeta app/code/Comonline/Mimodulo/etc/frontend

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="holamundo" frontName="holamundo">
        <module name="Comonline_Mimodulo" />
        </route>
    </router>
</config>

Con esto hemos definido la ruta para nuestra URL, que es el valor que hemos escrito en frontName dentro de la etiqueta <route>. Bien, ya tenemos creada nuestra ruta, pero ahora…

¿Qué método y de qué clase se nos va a ejecutar cuando llamemos a nuestra URL?

La respuesta es muy similar a cómo se comporta Magento 1, nuestra URL tendrá la siguiente forma:
/frontName/carpetacontroller/nombredelaclase, en caso de no escribir los valores carpetacontroller ni nombredelaclase, éstos serán los valores por defecto (index/index), pudiendo así usar simplemente la url como /frontName sin más parámetros.
El siguiente paso lógico será crear los archivos php de respuesta de nuestra URL, vamos por tanto a crear un archivo Index.php en la ruta app/code/Comonline/Mimodulo/Controller/Index, con el siguiente código:

<?php
namespace Comonline\Mimodulo\Controller\Index;
use Magento\Framework\App\Action\Context;
class Index extends \Magento\Framework\App\Action\Action
{
    protected $_resultPageFactory;
    public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
    {
        $this->_resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }
    public function execute()
    {
        $resultPage = $this->_resultPageFactory->create();
        return $resultPage;
    }
}

Como vemos, aquí hay una diferencia importante ya que en Magento 2, podemos tener una misma clase con diferentes métodos para una misma URL, ya que todas las URL ejecutarán el método execute()

Cómo crear un block en Magento 2

Vamos a crear nuestro bloque, siguiendo la lógica que ya conocemos, lo vamos a crear en la carpeta app/code/Comonline/Mimodulo/Block, lo llamaremos Holamundo

<?php
namespace Comonline\Mimodulo\Block;
class Holamundo extends \Magento\Framework\View\Element\Template
{
    public function Muestratexto()
    {
        return 'Hola mundo';
    }
}

¿facilito verdad? una simple clase que extiende de la clase natural de magento que nos retornará el texto Hola mundo sin más historias (de momento).
Ahora, habrá que crear el layout y los archivos del template para poder usar este bloque, así que vamos a ello.

Cómo crear el layout y los archivos del template en Magento 2

En este punto también nos vamos a encontrar con otra diferencia entre Magento 1 y 2, no es una diferencia abismal pero sí que debemos tenerla en cuenta. Estamos en Magento 2 y aquí tenemos dentro de la carpeta view de nuestro módulo tres carpetas: adminhtml, frontend y base. Creo que está bastante claro para lo que sirven cada una pero de todos modos lo detallo, la carpeta adminhtml sirve para contener la vista del admin, la carpeta frontend para contener las del frontend y la carpeta base servirá indistintamente para uno como para otro, generalmente menos utilizada, ya que deberemos usarla cuando creemos alguna vista que sea igual en ambos sitios y eso es muy poco frecuente.

Una vez entendido esto vamos a crear nuestro archivo xml para el layout, dentro de nuestra carpeta view de nuestro módulo, es decir en app/code/Comonline/Mimodulo/view/frontend/layout, lo llamaremos igual que nuestra ruta a nuestro controller, esto es holamundo_index_index.html

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
    <body>
        <referenceContainer name="content">
            <block class="Comonline\Mimodulo\Block\Holamundo" name="holamundo" template="holamundo.phtml" />
        </referenceContainer>
    </body>
</page>

Como se puede ver, hemos añadido la clase a nuestro bloque, que ha de ser ejecutada, la cual lanzará el phtml definido en el bloque.
Ahora creamos el phtml, que tendrá el contenido que se ha de mostrar. ¿Dónde? pues en su sitio, en la carpeta template de nuestro módulo, o sea app/code/Comonline/Mimodulo/view/frontend/template y lo vamos a llamar, por su nombre, holamundo.phtml

<div class="miclase"><?php echo $this->Muestratexto(); ?></div>

Con esto hemos finalizado ya nuestro primer módulo, ya podemos llamar a la URL que hemos definido y ver nuestro resultado, recuerda que la url será /holamundo/index/index, pero al ser la cadena index/index los valores por defecto puedes usar simplemente /holamundo

Está claro que no es un supermódulo pero bueno, ya hemos dado nuestro primer paso, sabemos colocar mediante un módulo elementos en una URL definida por nosotros.

Pronto daremos los siguientes pasos, usaremos el modelo para conectar con datos en la base de datos, aprenderemos las operaciones CRUD básicas en Magento (Create, Read, Update y Delete) y después aprenderemos a crear nuestras propias tablas en la base de datos de magento, manejar los eventos, los interceptors, etc…. o sea, nos queda mucho camino aún pero ya hemos dado el primer paso.

Si quieres recibir más información o tienes dudas, contacta con nosotros.

¿Te ha gustado? Comparte
Facebooktwittergoogle_pluspinterestlinkedinmail

Síguenos en nuestras Redes Sociales
Facebooktwitterlinkedin
  • Etiquetas: , ,
  • ¡Cuéntanos!: