Cursos Magento

Brincando com LayoutXML no Magento 2

,

13 de novembro de 2018

Atendendo a pedidos, neste artigo vamos ver algumas tarefas que podemos fazer com instruções de LayoutXML no Magento 2. Muitas das tarefas aqui explicadas podem ser aplicadas na customização de um tema, mas para os fins deste artigo, os caminhos sempre farão referência ao nosso módulo “imaginário” Magenteiro_Layout.

Caminho do XML

Após criar a estrutura básica de um módulo (no nosso caso, Magenteiro_Layout), precisamos criar os arquivos XML contendo as instruções de layout com aquilo que desejamos alterar no frontend da nossa loja.

Pasta: Os arquivos de Layout são colocados na pasta view/frontend/layout/ (dentro do módulo, ou seja, app/code/Magenteiro/Layout/view…).

Nome do arquivo: varia de acordo com o full action da página que queremos alterar. Isso é facilmente detectado com a Quick Devbar. Veja alguns exemplos:

  • cms_index_index.xml – home da loja
  • default.xml – todas as páginas
  • catalog_product_view.xml – página de produto

 

Customizando Layout no Magento 2

O tema padrão (luma), possuí 4 diferentes layouts (veja vendor/magento/module-theme/view/frontend/page_layout):

  • 1column (1 coluna)
  • 2columns-left (2 colunas com menu a esquerda)
  • 2columns-right (2 colunas com menu a direita)
  • 3columns (3 colunas)

É possível alterar o layout de qualquer página através da propriedade layout. Veja:

Incluindo arquivos estáticos (CSS, JavaScript, etc) no <head> do Magento 2

Já falamos um pouco sobre isso quando falamos sobre  como adicionar um javascript externo no Magento 2. Falamos também de como adicionar o mesmo JavaScript via requireJs, o que é ainda mais bacana. Mas vamos revisar:

Note que devemos usar src e não href para inserir CSS.

Com JavaScript externo é bem parecido:

 

Containers e Blocks

Parecido com os blocos estruturais do Magento 1, no Magento 2 temos os containers. Eles nos permitem criar placeholders html para colocar outros blocos dentro deles. E o mais bacana, é que podemos especificar as propriedades html dentro do XML.

Criando um Container e um Block

 

Mudando o template de um block

O template de um bloco pode ser alterado atualizando o atributo, ou usando uma action e passando o argumento.

No atributo

Bem parecido como o exemplo acima.

Via action

 

Em ambos os exemplos, o arquivo de template estaria em app/code/Magenteiro/Layout/view/[area]/templates/outro/template/exemplo.phtml.

Não acabou aqui, mas foi legal, né?

Este assunto e as possibilidades obviamente são mais extensas que o mostrado aqui. Por isso, já estou trabalhando em uma nova seção sobre o assunto que será adicionada ao curso de Magento 2 aqui do Magenteiro.

Ricardo Martins

Desenvolvedor web há mais de 15 anos, desde 2011 totalmente especializado em Magento, ajudo na criação de conteúdo, e cursos online sobre Magento - hoje com mais de 7000 alunos de 97 países - e criador do módulo PagSeguro Transparente para Magento, usado em mais de 12 mil lojas.

Últimos posts por Ricardo Martins (exibir todos)

Comentários