18
Abr
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!
Share this post
RELATED
Posts
Optimizando tu Código en Magento 2 con PHPCS y PHPCBF
Magento 2 es una plataforma de comercio electrónico robusta y flexible, utilizada por miles de tiendas en línea en todo el mundo. Sin embargo, como cualquier proyecto de desarrollo de software, mantener un código limpio y bien estructurado es fundamental...
Plugins en Magento 2
Magento 2 es una de las plataformas de comercio electrónico más populares y potentes disponibles en el mercado actual. Su flexibilidad y capacidad para personalizar diversas partes de la tienda en línea lo convierten en una opción preferida para muchos...
Curso de Magento 2 - CLI Command
Magento 2 es una de las plataformas de comercio electrónico más populares y potentes disponibles en la actualidad. Su flexibilidad y extensibilidad son algunas de las razones clave por las que los desarrolladores eligen trabajar con esta plataforma. Una de...
Curso de Magento 2 - Crear una API
Magento 2 es una plataforma de comercio electrónico muy potente y versátil que permite a los propietarios de tiendas en línea crear experiencias de compra únicas y personalizadas para sus clientes. Una de las características más destacadas de Magento 2...
Utilizar Knockout JS con PHTML en Magento 2
Magento 2 es una plataforma de comercio electrónico extremadamente poderosa y flexible que permite a los usuarios crear tiendas en línea altamente personalizadas. Una de las tecnologías principales que impulsa la experiencia del usuario en Magento 2 es Knockout.js. Knockout.js...
¿Cómo crear un JS Component en Magento 2?
Magento 2 es una plataforma de comercio electrónico robusta y altamente personalizable que ofrece numerosas formas de agregar funcionalidades adicionales a una tienda en línea. Una de estas formas es mediante el uso de JavaScript (JS Component) para mejorar la...
Curso de Magento 2 - Observer / Events
Magento 2, uno de los sistemas de comercio electrónico más populares y robustos del mundo, ofrece una arquitectura flexible que permite a los desarrolladores extender y personalizar su funcionalidad de diversas maneras. Uno de los elementos clave para lograr esta...
Curso de Magento 2 - Modelos (Models)
Magento 2 es una plataforma de comercio electrónico potente y altamente personalizable que ofrece a los desarrolladores la capacidad de crear extensiones y funcionalidades personalizadas para satisfacer las necesidades específicas de sus proyectos. Uno de los componentes fundamentales en el...
Curso de Magento 2 - Bloques (Block)
Magento 2, uno de los sistemas de gestión de comercio electrónico más potentes y populares del mundo. Magento 2 ofrece una arquitectura robusta y altamente personalizable que permite a los desarrolladores crear experiencias de usuario únicas y...
Curso de Magento 2 - Controladores (Controller)
Magento 2 es una plataforma de comercio electrónico robusta y versátil que permite a los desarrolladores crear tiendas en línea personalizadas y eficientes. Uno de los elementos fundamentales en el desarrollo de extensiones y personalizaciones en