Camada de Visualização no Magento 2

O que é um bloco no Magento 2?

O Magento trabalha com o padrão MVC para o desenvolvimento de seus módulos, a View (camada de visualização) é contituída por três camadas: layout, Block e template.

A visualizaço do conteúdo em uma página é constituída de duas partes, a parte "visual" que são os templates (arquivos em phtml) e a parte lógica que são os arquivos dentro do diretório Block (arquivos em PHP). Devem ser utilizados em locais para que não ocorra repetição de conteúdo e/ou código em outras páginas, contêiners e/ou blocos. É possível utiliza o Block (parte lógica) em outros templates (parte visual), e é possível reutilizar um template em outros contêiners e páginas.

Código para inserir um bloco

Layout

Para inserir, remover ou editar algum bloco na página deve ser editado ou criado um arquivo de layout. Saiba como criar um arquivo de layout neste post "Como criar arquivos de layout Magento 2".

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="{Vendor}\{Module}\Block\{BlockName}" name="{block_name}" template="{Vendor}_{Module}::{paths}/{file_name}.phtml" />
    </referenceContainer>
</page>

Block

Um arquivo Block deve conter toda a lógica de visualização necessária, é altamente recomendável não ter conter nenhum tipo de HTML ou CSS. Cada Bloco deve se extender a partir da classe \Magento\Framework\View\Element\Template.

Este diretório contempla todas as classes responsáveis por trabalhar com os dados dos templates, ou seja, o diretório Block é a parte lógica que será usada no layout para exibir os dados que são carregadas pelas classes modeladoras.

<?php

namespace {Vendor}\{Module}\Block;

use Magento\Framework\View\Element\Template\Context;
use Magento\Framework\View\Element\Template;

class {BlockName} extends Template
{
    public function __construct(
        Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    public function {methodName}(): {type}
    {
        // Code here
    }
}

Pode ser inserida classes através de injeção de dependêcia para conseguir exibir os dados necessários no template.

Caso o template não necessite de lógica, é recomendado não deixar o atributo class no arquivo de layout ou criar um bloco e apenas extender a classe \Magento\Framework\View\Element\Template, sem inserir nenhum método.

Templates

No arquivo de layout, definimos o modelo por {Vendor}_{Module}::{paths}/{file_name}.phtml. Arquivos de template devem seguir a estrutura de pastas \{Vendor}\{Module}\view\{area}\templates\{paths}\{file_name}.phtml. Onde os templates podem não estar dentro de nenhum diretório, onde referenciado {paths} ou até mesmo estar inseridos dentro de um ou mais diretórios.

O caminho da área pode ser frontend ou adminhtml que define onde o templates será aplicado. Para inserir um template no painel administrativo do Magento utilizá-se a área adminhtml, e para inserir um template na parte visual da loja do site utilizá-se a área frontend.

No arquivo de template podemos usar a variável $block para acessar os métodos públicos que a classe Block disponibiliza.

Os arquivos de template com a extensão phtml são destinados a conteúdos dinâmicos, mesclando PHP (vindo da classe Block) com HTML (descrito no próprio template).

<?php
/**
 * @var \{Vendor}\{Module}\Block\{BlockName} $block
 */

$block->{methodName}();
?>

Finalização

🔗 Valores entre chaves ({test}) devem ser alterados na implementação do código.

Habilitando as alterações

Apague os arquivos que são gerados na compilação do Magento e execute o comando PHP para gerar a configuração das injeções de dependência e todas as classes ausentes que precisam ser geradas (proxys, interceptors, etc) e para limpar todos os caches de armazenamento em cache do processos.

rm -rf var/generation/
rm -rf generated/
php bin/magento setup:di:compile
php bin/magento cache:clean
php bin/magento flush

Diretórios e Arquivos

Segue a a lista de diretórios e arquivos que devem ser criados.

- app/
  - code/
    - {Vendor}/
      - {Module}/
        - etc/
          - module.xml
        - view/
          - {area}/
            - layout/
              - {router_id}_{controller_directory}_{controller_name}.xml
            - templates/
              - {paths}/
                - {file_name}.phtml
        - registration.php
        - composer.json