En este tutorial vamos a aprender a crear un controlador en el frontend con una ruta personalizada, además de crear un layout que aparecerá en nuestra página cuando accedamos a nuestro controlador.

El primer paso que haremos es crear nuestro controlador en un nuevo módulo. En nuestro caso el módulo será JLNarvaez_CustomLayout.

Crearemos el controlador en la siguiente ruta:

app/code/JLNarvaez/CustomLayout/Controller/Saludo/Index.php

<?php
namespace JLNarvaez\CustomLayout\Controller\Saludo;

use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Context;
use Magento\Framework\App\Action\Action;

class Index extends Action
{
    /** @var PageFactory  */
    private $pageFactory;

    /**
     * Index constructor.
     *
     * @param Context $context
     * @param PageFactory $pageFactory
     */
    public function __construct(
        Context $context,
        PageFactory $pageFactory
    ) {
        $this->pageFactory = $pageFactory;
        return parent::__construct($context);
    }

    /** @inheritdoc */
    public function execute()
    {
        return $this->pageFactory->create();
    }
}

A la hora de crear nuestro controlador, la única obligación es que esté en la carpeta Controller. El árbol que queramos crear dentro es decisión nuestra.

El siguiente paso sería crear nuestro routes.xml que nos servirá para registrar la ruta (en este caso en el frontend).

app/code/JLNarvaez/CustomLayout/etc/frontend/routes.xml

<?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 frontName="prueba" id="layoutid">
            <module name="JLNarvaez_CustomLayout"/>
        </route>
    </router>
</config>

• router
  • id => Le pondremos standard en este caso, ya que queremos que apunte a la parte frontend.
• route
  • frontName => Este atributo nos servirá para especificar la URL que tendrá nuestro controlador. La URL a la que accederemos en el controlador está formada de la siguiente manera: http://ejemplo.com/frontName/carpetaControlador/accionControlador.
  • id => Nos servirá para identificar el layout xml que crearemos para visualizar contenido al acceder en nuestro controlador. El nombre del XML deberá ser: routerId_carpetaControlador_accionControlador.xml,
    • module
      • name => Deberemos especificar el nombre de nuestro módulo.

Lo próximo que haremos será crear nuestro layout, nombrándolo tal y como hemos explicado en el esquema anterior (teniendo en cuenta el id especificado en el elemento route). En nuestro caso estará formado de la siguiente manera:

app/code/JLNarvaez/CustomLayout/view/frontend/layout/layoutid_saludo_index.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">
    <referenceContainer name="content">
        <block name="saludo_prueba" template="JLNarvaez_CustomLayout::saludo.phtml" />
    </referenceContainer>
</page>

Como vemos en el anterior XML, he añadido un block con un template que he creado para hacer la prueba, y que muestre algo por pantalla. Para crear este template lo único que tendremos es que añadir un archivo phtml de la siguiente manera:

app/code/JLNarvaez/CustomLayout/view/frontend/templates/saludo.phtml

<?php

echo "Hola ¿Qué tal?";

Con esto ya tendríamos un Controlador creado, con nuestro layout personalizado, al cual podremos acceder con la siguiente ruta:

http://ejemplo.com/prueba/saludo/index

IMPORTANTE: En el caso de que nuestro árbol dentro de la carpeta Controller sea más grande (por ejemplo: Controller/Saludo/Hola/Index.php las carpetas dentro de Controller se indicarán en la URL separadas por _. En este caso sería http://ejemplo.com/prueba/saludo_hola/index). Con esto queremos decir que la URL siempre estará formada por tres partes: frontName/carpetasControlador/accionControlador.