Como criar um novo Layout XML no Magento 2

O Front End do Magento é baseado em arquivos layout XML. Eles servem basicamente para estruturar como uma página deve ser entregue, e que componentes fazem parte dela.

No Magento 2: O Curso, tenho uma seção inteira sobre Layout XML. Mas hoje veremos especificamente como criar um novo layout xml. Nos próximos artigos desta série, você verá como estender um arquivo de layout existente e como sobrescrever um.

Criando um novo Layout

No Magento 2, você pode criar um novo layout dentro de um tema ou dentro de um módulo Magento. Siga esses passos para criar um novo layout:

Passo 1: crie o arquivo de layout

Para este exemplo, você pode chamá-lo de novo-layout.xml.

Se estiver criando ele dentro de um módulo, coloque-o em <pasta do seu módulo>/view/frontend/page_layout/novo-layout.xml.

No entanto, se estiver em um tema, coloque-o em <pasta do seu tema>/Magento_Theme/page_layout/novo-layout.xml.

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
    </referenceContainer>
    <referenceContainer name="page.wrapper">
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
    </referenceContainer>
</layout>

Passo 2: declare seu novo layout

Isso é feito com a criação do arquivo layouts.xml.

Se estiver criando um módulo, defina ele em <pasta do seu módulo>/view/frontend/layouts.xml.

Se for um tema, <pasta do seu tema>/Magento_Theme/layouts.xml.

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="novo-layout">
        <label translate="true">Meu Novo Layout</label>
    </layout>
</page_layouts>

Lembre-se de definir um ID único para seu novo layout. Ele deve ser igual ao nome do arquivo criado no primeiro passo.

Passo 3: Limpe o cache e confira o resultado

Faça isso com bin/magento cache:clean ou usando a opção “Flush Magento Cache” no admin.

Se tudo estiver certo, seu novo layout será exibido nos seletores de layout. Como por exemplo em Lojas > Configurações > Web > Layouts Padrões.

No próximo artigo desta série, veremos como estender um layout existente.

• Sobre
• Últimos Posts

Ricardo Martins

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

Últimos posts por Ricardo Martins (exibir todos)

• 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