Como criar um bloco no Magento 2
Tags: php, magento2, tutorial, braziliandevs
Published: 2021-11-29 16:49:21

## 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](https://dev.to/santanaluc94/como-criar-arquivos-de-layout-magento-2-1i69)".

```xml
<?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
<?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
<?php
/**
 * @var \{Vendor}\{Module}\Block\{BlockName} $block
 */

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

---

## Finalização

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

</aside>

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

```bash
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
```