Curso de Magento 2 – Bloques, Layouts y Controladores
Magento 2 es una plataforma líder en comercio electrónico que ofrece flexibilidad y potencia para crear tiendas en línea personalizadas y altamente funcionales. Una de las características clave de Magento 2 es su arquitectura modular, que permite a los desarrolladores crear componentes reutilizables para agregar nuevas funcionalidades a una tienda en línea. En este artículo, exploraremos cómo crear bloques, layouts y controladores en Magento 2 para personalizar la experiencia de compra.
Tambien te puede interesar:
¿Qué son los Bloques, Layouts y Controladores en Magento 2?
Antes de sumergirnos en la creación de bloques, layouts y controladores en Magento 2, es importante comprender qué son y cómo se utilizan en el contexto de la plataforma.
- Bloques: Los bloques son componentes de la interfaz de usuario de Magento 2 que contienen lógica de presentación y pueden generar contenido dinámico. Los bloques se utilizan para mostrar información en las páginas de la tienda en línea, como productos, categorías, carritos de compra, etc.
- Layouts: Los diseños en Magento 2 definen la estructura visual de las páginas de la tienda en línea. Utilizando archivos XML llamados archivos de diseño, puedes configurar la disposición de los bloques en una página específica y establecer la relación entre los bloques y las plantillas.
- Controladores: Los controladores en Magento 2 son componentes que gestionan las solicitudes HTTP y devuelven respuestas al navegador del cliente. Los controladores manejan la lógica empresarial y coordinan la interacción entre los modelos, vistas y otros componentes de Magento 2.
Ahora que hemos establecido una comprensión básica de estos conceptos, veamos cómo crear y utilizar bloques, layouts y controladores en Magento 2.
Creando tu primer módulo en Magento 2
Primero vamos a crear un módulo en Magento 2 con la estructura básica. Puedes crearlo desde mi tutorial sobre ¿Cómo crear un módulo en Magento 2? o simplemente descargandolo en el siguiente enlace:
Descargar módulo básico de Magento 2Creación de un Bloque en Magento 2
Los bloques en Magento 2 se crean como clases PHP que extienden la clase Magento\Framework\View\Element\Template. Dirigete al directorio raiz de tu proyecto en Magento 2 y crea un archivo Index.php en la siguiente ruta app/code/MyCompany/MyModule/Block/Tutorial/:
<?php
/**
* Copyright © Gerson Hernández All rights reserved.
* Go To https://gersonhernandez.net/
*/
declare(strict_types=1);
namespace MyCompany\MyModule\Block\Tutorial;
class Index extends \Magento\Framework\View\Element\Template
{
/**
* Constructor
*
* @param \Magento\Framework\View\Element\Template\Context $context
* @param array $data
*/
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
}
Creación de Layouts en Magento 2
Los diseños en Magento 2 se definen utilizando archivos XML en el directorio view/frontend/layout de tu módulo. Crea un archivo XML llamado mycompany_tutorial_index.xml dentro de la siguiente ruta app/code/MyCompany/MyModule/view/frontend/layout/:
<?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"> <body> <referenceContainer name="content"> <block name="tutorial.index" class="MyCompany\MyModule\Block\Tutorial\Index" template="MyCompany_MyModule::tutorial/index.phtml"/> </referenceContainer> </body> </page>
Ahora necesitamos crear el template de nuestro layout. Crea un archivo index.phtml en la siguiente ruta app/code/MyCompany/MyModule/view/frontend/templates/tutorial/:
Hello tutorial/index.phtml
Creación de una Ruta en Magento 2
Para acceder a nuestro código desde el navegador necesitaremos una URL. Para ello crea un archivo llamado routes.xml en la siguiente ruta: app/code/MyCompany/MyModule/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="mycompany" frontName="mycompany"> <module name="MyCompany_MyModule"/> </route> </router> </config>
Creación de un Controlador en Magento 2
Los controladores en Magento 2 se crean como clases PHP que implementan diferentes interfaces. En este caso concreto implementaremos la interface Magento\Framework\App\Action\HttpGetActionInterface. Crea un archivo llamado Index.php en la siguiente ruta app/code/MyCompany/MyModule/Controller/Tutorial/:
<?php
/**
* Copyright © Gerson Hernández All rights reserved.
* Go To https://gersonhernandez.net/
*/
declare(strict_types=1);
namespace MyCompany\MyModule\Controller\Tutorial;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\Controller\ResultInterface;
use Magento\Framework\View\Result\PageFactory;
class Index implements HttpGetActionInterface
{
/**
* @var PageFactory
*/
protected $resultPageFactory;
/**
* Constructor
*
* @param PageFactory $resultPageFactory
*/
public function __construct(PageFactory $resultPageFactory)
{
$this->resultPageFactory = $resultPageFactory;
}
/**
* Execute view action
*
* @return ResultInterface
*/
public function execute()
{
return $this->resultPageFactory->create();
}
}
Visualizando nuestro módulo
Para que se puedan aplicar todos los cambios, será necesario correr los siguientes 2 comandos:
php bin/magento setup:upgrade
php bin/magento cache:clean
Ahora abrimos nuestro navegador web y escribimos la url de nuestro proyecto seguido de /mycompany/tutorial/index. En mi caso personal quedaria mas o menos de la siguiente manera: http://magento2.localhost/mycompany/tutorial/index. Tendrias que ver una pantalla como la siguiente:
Si deseas el código fuente de este tutorial puedes descargarlo haciendo clic en el siguiente enlace:
Descargar código fuente de este tutorialConclusión
La creación de bloques, layouts y controladores en Magento 2 es fundamental para personalizar la experiencia de compra en tu tienda en línea. Al aprovechar la arquitectura modular de Magento 2, puedes crear componentes reutilizables que agreguen nuevas funcionalidades y mejoren la usabilidad de tu tienda en línea. Con un sólido conocimiento de cómo crear y utilizar bloques, layouts y controladores, puedes llevar la personalización de tu tienda en línea al siguiente nivel y ofrecer una experiencia de compra excepcional a tus clientes.
¡Eso es todo!
Deja una respuesta