Cursos Magento

Criando Layout XML, Block e Template no Magento 2

,

Atualizado em 14 de abril de 2020

Hoje veremos como criar e um arquivo de layout xml, um Block e um Template no Magento 2.

Este artigo é o segundo e último artigo da série sobre Controllers no Magento 2. Confira o artigo anterior onde vimos Como criar um Controller no Magento 2.

Recapitulando…

No artigo anterior, criamos um controller para a URL http://magenteiro.com/minharota/meucontroller/surpresa, e fizemos ele exibir um “Surpresa” como resultado.

Controller no Magento 2 funcionando

Hoje vamos trabalhar um pouco melhor este módulo e fazer uso do layout da loja, de blocos e templates.

Caso não queira criar o módulo do zero para acompanhar, basta preencher seu nome e e-mail abaixo para receber o módulo da aula anterior.

 O que vamos fazer aqui

Criando o arquivo de Layout

Diferente do que acontecia no Magento 1, cada url (action) da nossa loja possuí um arquivo Layout XML próprio.

Como a URL que vamos trabalhar é http://magenteiro.com/minharota/meucontroller/surpresa ,  e o route id definido no artigo anterior era supimpa, o nosso arquivo de Layout se chamará supimpa_meucontroller_surpresa.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">
    <body>
        <referenceContainer name="content">
            <block class="Magenteiro\Supimpa\Block\Surpresa" template="Magenteiro_Supimpa::surpresa.phtml" name="supimpa_surpresa"/>
        </referenceContainer>
    </body>
</page>

Na linha 4 referenciamos um container existente chamado content, e então inserimos um novo bloco dentro dele.

Nosso bloco é composto de uma classe PHP (Magenteiro\Supimpa\Block\Surpresa) e de um arquito PHTML.

O caminho do arquivo PHTML é relativo, como veremos adiante.

O parâmetro name também é obrigatório e deve ser único.

Criando a classe do Block

A classe do bloco deve ser criada na pasta especificada no XML acima. Por convenção, a pasta Block é utilizada.

<?php
namespace Magenteiro\Supimpa\Block;

class Surpresa extends \Magento\Framework\View\Element\Template
{
    // Métodos públicos ficam disponíveis dentro do phtml na variável $block
    public function getHello()
    {
        return "Hello Magenteiro!";
    }
}

Criando o arquivo de Template phtml

O arquivo de template foi definido no XML acima em template=”Magenteiro_Surpresa::surpresa.phtml” . No entanto, desta vez o caminho será relativo à pasta view/frontend/templates.

Nosso arquivo pode conter qualquer coisa, misturando linguagens html ou php.

<h1>Deu certo!</h1>
<h2><?php echo $block->getHello();?></h2>

Implementando o PageFactory no nosso Controller

O Controller da aula anterior continha apenas um método execute() que devolvia um echo "Surpresa!".

Para que o Magento carregue o Layout XML precisaremos da classe \Magento\Framework\View\Result\PageFactory no nosso Controller.

Vamos modificar nosso Controller e inserir esta classe através do uso de Dependency Injection.

<?php
namespace Magenteiro\Supimpa\Controller\Meucontroller;

class Surpresa extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $pageFactory)
    {
        $this->_pageFactory = $pageFactory;
        return parent::__construct($context);
    }

    public function execute()
    {
        return $this->_pageFactory->create();
    }
}

Dica: Se você não está familiarizado(a) com Dependency Injection, tem uma aula em vídeo gratuita na página de inscrição do curso de Magento 2.

Limpando o cache

Antes de testar, lembre-se de limpar os caches com bin/magento cache:clean ou bin/magento c:c.

Resultado do nosso Controller final

Módulo completo

Se você perdeu alguma coisa ou não conseguiu criar seu controller com seus arquivos de layout, baixe o módulo que acabamos de criar e veja o que deu errado por aí.

Muito além de um controller

Se você quer ir muito além da criação de um Controller e fazer parte de uma turma que curte aprender e compartilhar conhecimento, se inscreva no Magento 2: O Curso.

Dessa forma você poderá aprender isso e muito mais, com aulas em vídeo e um grupo secreto de estudos. Os melhores Magenteiros estão por lá. Só falta você.

Últimos posts por Ricardo Martins (exibir todos)

Artigos Relacionados:

Como sobrescrever um arquivo de Layout XML no Magento 2
Quem é o novo instrutor do Magenteiro?
O Fim do Magento Open Source
Guest checkout bloqueado na API REST do Magento 2? Confira isso.
Assuntos: | | | | |
Comentários

Deixe seu comentário

[fbcomments url="https://www.magenteiro.com/blog/magento-2/layout-xml-block-template/"]
Leia também
Como estender um arquivo de Layout no Magento
Obtendo dados de clientes via API no Magento 2
Guest checkout bloqueado na API REST do Magento 2? Confira isso.
Configurando multistore local no Magento 2