Crear un controlador en Magento 2

Crear controlador en Magento 2

Controladores en nuestros módulos

En esta entrada aprenderemos a crear nuestros propios frontend controllers en Magento 2.

En la parte de los controladores apreciaremos un gran cambio tanto en la forma de definir las rutas como en el propio controlador.

Siguiendo con el mismo módulo que en las entradas anteriores (Progento_HolaMagento) vamos a crear nuestro propio frontend controller y cargar un layout.

Lo primero que vamos hacer es definir una ruta creando el archivo Progento/HolaMagento/etc/frontend/routes.xml y añadir el siguiente código:


<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
 <router id="standard">
 <route id="holamagento" frontName="holamagento">
 <module name="Progento_HolaMagento" />
 </route>
 </router>
</config>

Luego nos tocará crear el controlador, hay varias formas de hacerlo pero nosotros hemos elegido crear nuestro controlador abstracto para que todos los controladores extiendan del mismo.

Creamos el archivo Progento/HolaMagento/Controller/Index.php y añadimos el siguiente código:


<?php
namespace Progento\HolaMagento\Controller;
 
use Magento\Framework\App\RequestInterface;
 
abstract class Index extends \Magento\Framework\App\Action\Action
{

 protected $inlineTranslation;

 protected $scopeConfig;
 
 public function __construct(
 \Magento\Framework\App\Action\Context $context,
 \Magento\Framework\Translate\Inline\StateInterface $inlineTranslation,
 \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
 ) {
 parent::__construct($context);
 $this->inlineTranslation = $inlineTranslation;
 $this->scopeConfig = $scopeConfig;
 }

 public function dispatch(RequestInterface $request)
 {
 return parent::dispatch($request);
 }
}

Y ahora creamos nuestro controlador: Progento/HolaMagento/Controller/Index/Index.php


<?php
namespace Progento\HolaMagento\Controller\Index;

class Index extends \Progento\HolaMagento\Controller\Index
{
 public function execute()
 {
 $this->_view->loadLayout();
 $this->_view->renderLayout();
 }
}

Os habréis fijado que ahora el controlador no es el nombre de la clase sino la carpeta y la acción es el nombre de la clase, para cada acción tendremos un archivo en Magento2.

Bien, ahora vamos a crear un bloque en Progento/HolaMagento/Block/Progentoproduct.php:

<?php
 namespace Progento\HolaMagento\Block;
 
 use Magento\Framework\View\Element\Template;
 
 class Progentoproduct extends Template {
 
 public function _prepareLayout() {
 return parent::_prepareLayout();
 }
 
 }

Para ahora crear nuestro propio layout que será el encargado de llamar al bloque cuando el usuario navegue hasta nuestra acción.

Esto es bastante diferente a Magento 1 ya que teníamos un único layout donde le indicábamos <ruta_controlador_acción>, ahora ha pasado a ser un archivo .xml para cada ruta_controlador_acción quedando de la siguiente manera: holamagento_index_index.xml

Este archivo lo crearemos en la carpeta: Progento/HolaMagento/view/frontend/layout/holamagento_index_index.xml


<?xml version="1.0" encoding="utf-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<title>Nuestro primer controlador desde Progento</title>
</head>
<body>
<referenceContainer name="content">
<block class="Progento\HolaMagento\Block\Progentoproduct" template="hello.phtml" />
</referenceContainer>
</body>
</page>

Donde podemos apreciar que el layout también es diferente pero es bastante sencillo de entender.

Por último crearemos nuestro template en: Progento/HolaMagento/view/frontend/templates/hello.phtml y añadiremos algo como esto:


<div>
<h2><?php echo 'Has creado un controlador con Magento 2' ?></h2>
</div>

Ahora limpiaremos la cache: rm -rf var/cache y navegaremos a http://url/holamagento/index/index

Y deberíamos ver algo como esto:

magento-controlador

 

Esperamos que les haya gustado la entrada.

Happy coding =)

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Solve : *
24 + 16 =