Cursos Magento

Criando Layout XML, Block e Template no Magento 2

,

07 de março de 2019

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.

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.

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.

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.

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ê.

Ricardo Martins

É desenvolvedor web há 16 anos e um dos primeiros certificados pela Magento no Brasil. Instrutor de mais de 8 cursos Magento (os principais no magenteiro.com/cursos) com mais de 9 mil alunos de 100 países, é também criador do módulo PagSeguro Transparente, usado em mais de 12 mil lojas.

Últimos posts por Ricardo Martins (exibir todos)

Comentários