Cursos Magento

Adicionando Update de Layout (XML) via Admin

, ,

Atualizado em 22 de janeiro de 2023

O Magento desde suas primeiras versões sempre fez uso de XML de Layout para gerenciar aquilo que vemos no frontend de nosso e-commerce.

Uma vez que superamos a fase da “raiva” durante o aprendizado desta arte ele passa a ser cada vez mais útil e maravilhoso no nosso dia a dia.

Até a versão 2.3.3 do Magento, alguém com acesso à área administrativa de uma loja poderia usar o poder dessas instruções XML para modificar páginas de produtos, categorias, páginas CMS, criar regras programadas de atualização e muito mais.

A fim de garantir a segurança de nossas lojas e evitar injeção de scripts maliciosos ou modificação indevida ou mal intencionada, esta possibilidade foi removida.

mag after update

Tudo bem, não foi bem removida, mas sim convertida em um seletor. Em outras palavras, agora nossas modificações devem ser guardadas em arquivos com formatos específicos caso queiramos ver a opção disponível no admin.

Custom Layout Update – Como adicionar uma?

Agora para exibir uma atualização de layout no admin da loja, precisamos criar um arquivo com um nome específico dentro da pasta de layout.

A pasta de layout pode ser a pasta de um módulo ou de um tema. Ex:

  • <pasta_do_modulo>/view/frontend/layout
  • <pasta_do_tema>/layout/

O nome do arquivo de layout XML

Vai variar de acordo com o tipo de entidade que queremos modificar, conforme regra abaixo:

  • Para Categorias: catalog_category_view_selectable_<ID Categoria>_<Nome da Opcap>.xml
  • Para Produtos: catalog_product_view_selectable_<SKU>_<Nome da Opcao>.xml
  • Para páginas CMS: cms_page_view_selectable_<Identificador URL>_<Nome da Opcao>.xml
    • Caso o nome do campo contenha /, elas devem ser substituídas por _

O nome da opção não deve conter espaços ou a maioria dos caracteres especiais e estarão disponíveis nas áreas acima após a limpeza do cache.

Exemplo prático

O arquivo abaixo é um arquivo de layout inserido em meu tema para fins de teste. O arquivo está é o <pasta_magento>app/design/frontend/Magenteiro/firestore/Magento_Theme/layout/cms_page_view_selectable_home_FundoCinza.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <attribute name="style" value="background-color: #dedede"/>
    </body>
</page>

Ao editar a minha página “home” (identificador dela) em Conteúdo > Páginas > Home > Visual, tenho a opção FundoCinza disponível em “Custom Layout Update” (Atualização Personalizada de Leiaute).

Indo além

Este conteúdo foi criado enquanto começo a seção sobre Layout XML do Magento 2: O Curso 3ª Edição. Trata-se de uma atualização do meu curso mais completo sobre Magento 2, onde abordo em detalhe vários aspectos e princípios sobre este assunto. Ideal para quem quer entender como isso tudo funciona e tirar proveito da flexibilidade que a plataforma Magento oferece, além de oferecer boas opções para seus clientes no admin.

Se você preferir, também pode ler a documentação oficial ou este fórum que serviu de inspiração para o artigo acima.

E se foi útil pra você, não deixe de comentar e compartilhar.

Grande abraço e até a próxima.

Vai perder o próximo artigo?

Últimos posts por Ricardo Martins (exibir todos)
Comentários

Deixe seu comentário

[fbcomments url="https://www.magenteiro.com/blog/magento-2/layout-personalizado-via-admin/"]