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:
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> </page>
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:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="stylesheet"
src="//netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
src_type="url"/>
</head>
</page>Note que devemos usar
src e não href para inserir CSS.
Com JavaScript externo é bem parecido:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"
src_type="url"/>
</head>
</page>
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
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<container
name="magenteiro.container"
htmlId="minhaDiv"
htmlTag="div"
before="-"
label="Hello"
htmlClass="classeCss">
<block name="meuBlock" template="Magenteiro_JavaScript::meubloco.phtml" />
</container>
</body>
</page>
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.
<referenceBlock name=”meuBloco” template=”Magenteiro_Layout::outro/template/exemplo.phtml”/>
Via action
<referenceBlock name="meuBloco">
<action method="setTemplate">
<argument name="template" xsi:type="string">Magenteiro_Layout::outro/template/exemplo.phtml</argument>
</action>
</referenceBlock>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.
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/magento-2/brincando-com-layoutxml-no-magento-2/"]