{"id":2321,"date":"2020-05-06T00:05:00","date_gmt":"2020-05-06T03:05:00","guid":{"rendered":"https:\/\/www.magenteiro.com\/blog\/?p=2321"},"modified":"2020-05-05T20:57:39","modified_gmt":"2020-05-05T23:57:39","slug":"sobrescrevendo-arquivos-de-template","status":"publish","type":"post","link":"https:\/\/www.magenteiro.com\/blog\/magento-2\/sobrescrevendo-arquivos-de-template\/","title":{"rendered":"Sobrescrevendo arquivos de template"},"content":{"rendered":"\n

Cada p\u00e1gina Magento \u00e9 composta por diversos blocos. De forma geral, cada bloco \u00e9 representado por uma classe PHP e um arquivo de template com extens\u00e3o PHTML.<\/p>\n\n\n\n

Por fim, a forma como estes blocos s\u00e3o inseridos e organizados \u00e9 feita atrav\u00e9s de arquivos de Layout XML.<\/p>\n\n\n\n

Embora seja f\u00e1cil encontrar qual arquivo phtml \u00e9 preciso alterar<\/a>, jamais devemos modificar diretamente um arquivo de um tema<\/strong> e principalmente do core<\/em> do Magento (localizados em \/vendor ou \/app\/design\/frontend\/Magento).<\/p>\n\n\n\n

Existem v\u00e1rias formas de se fazer isso e garantir que nossa loja continue funcionando nas pr\u00f3ximas atualiza\u00e7\u00f5es do Magento ou do nosso tema.<\/p>\n\n\n\n

Neste artigo veremos como sobrescrever um arquivo de template .phtml atrav\u00e9s de um m\u00f3dulo criado por n\u00f3s.<\/p>\n\n\n\n

Veja os passos que vamos seguir aqui:<\/p>\n\n\n\n

  1. Criar um m\u00f3dulo do zero<\/li>
  2. Localizar o arquivo de template que queremos alterar e onde ele foi inserido<\/li>
  3. Criar uma atualiza\u00e7\u00e3o de Layout e um novo arquivo phtml pra ele<\/li><\/ol>\n\n\n\n

    Criando o m\u00f3dulo<\/h2>\n\n\n\n

    Para fins de exemplo, criarei o m\u00f3dulo Magenteiro_OverridePhtml<\/code>. Caso n\u00e3o esteja familiarizado(a) com a cria\u00e7\u00e3o de m\u00f3dulos<\/a>, veja como criar a estrutura b\u00e1sica de um m\u00f3dulo Magento 2<\/a>.<\/p>\n\n\n\n

    Localizando o arquivo que queremos alterar<\/h2>\n\n\n\n

    Para fins de exemplo, gostaria de alterar o template que insere aquela caixa de e-mail para assinar a newsletter do Magento. Ap\u00f3s ativar as dicas de template<\/a>, pude ver que o arquivo que quero alterar est\u00e1 localizado em \/vendor\/magento\/module-newsletter\/view\/frontend\/templates\/subscribe.phtml<\/code>.<\/p>\n\n\n\n

    \"\"<\/a><\/figure>\n\n\n\n

    Atualiza\u00e7\u00e3o de Layout dentro do meu m\u00f3dulo<\/h2>\n\n\n\n

    Antes de criar um arquivo de atualiza\u00e7\u00e3o, \u00e9 preciso entender quando este componente foi inserido na p\u00e1gina. Isto \u00e9, qual layout handle<\/a><\/em> foi usado. Caso contr\u00e1rio, eu corro o risco de realizar uma atualiza\u00e7\u00e3o em apenas uma das p\u00e1ginas.<\/p>\n\n\n\n

    Eu posso usar uma das ferramentas de desenvolvimento<\/a> que me auxiliariam a encontrar esta atualiza\u00e7\u00e3o de layout. No entanto, no meu caso, farei apenas uma busca geral por subscribe.phtml<\/code> em todos os XML’s da minha loja. Desta forma poderei rapidamente saber quem fez a inser\u00e7\u00e3o deste arquivo.<\/p>\n\n\n\n

    \"\"<\/a>
    Busca por subscribe.phtml em todos os arquivos .xml da minha loja<\/figcaption><\/figure>\n\n\n\n

    Note que o nome do arquivo encontrado \u00e9 ‘default.xml’. No Magento 2 o nome do arquivo corresponde ao layout handle<\/em> que est\u00e1 sendo alterado. Quando o handle<\/em> default<\/code> \u00e9 usado, a atualiza\u00e7\u00e3o de layout \u00e9 feita em todas as p\u00e1ginas. Ou seja, a newsletter ser\u00e1 inserida em todas as p\u00e1ginas.<\/p>\n\n\n\n

    Sobrescrevendo o phtml<\/h3>\n\n\n\n

    Dentro do nosso m\u00f3dulo, criaremos o arquivo \/view\/frontend\/layout\/default.xml<\/code> e dentro dele faremos a substitui\u00e7\u00e3o do template phtml. Tamb\u00e9m duplicaremos o arquivo phtml com as modifica\u00e7\u00f5es que queremos dentro de \/view\/frontend\/templates\/subscribe.phtml<\/code>.<\/p>\n\n\n\n

    Na internet voc\u00ea encontrar\u00e1 duas formas de fazer esta atualiza\u00e7\u00e3o, e uma delas \u00e9 apontada como “deprecated<\/strong>” ou “obsoleta”. No entanto, a forma obsoleta \u00e9 a \u00fanica que funciona em boa parte dos casos, conforme reportado em 2016 neste bug report<\/a> ainda sem solu\u00e7\u00e3o (Abr\/2020).<\/p>\n\n\n\n

    Veja as duas formas:<\/p>\n\n\n

    <?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <body>\n        <referenceBlock name="form.subscribe">\n            <!--M\u00e9todo 1-->\n            <!--<arguments>\n                <argument name="template" xsi:type="string">Magenteiro_OverridePhtml::subscribe.phtml<\/argument>\n            <\/arguments>-->\n\n            <!--M\u00e9todo 2 (obsoleto?)-->\n            <action method="setTemplate">\n                <argument name="template" xsi:type="string">Magenteiro_OverridePhtml::subscribe.phtml<\/argument>\n            <\/action>\n        <\/referenceBlock>\n    <\/body>\n<\/page>\n<\/pre>\n
    <\/p>\n\n\n
    No caso da nossa newsletter somente o segundo m\u00e9todo funcionou, por isso o primeiro foi comentado.<\/p>\n\n\n\n
    Importante<\/h4>\n\n\n\n
    Outro ponto importante quando estamos sobrescrevendo atualiza\u00e7\u00f5es de layout XML feitas por m\u00f3dulos, \u00e9 garantir que as atualiza\u00e7\u00f5es de layout do m\u00f3dulo que est\u00e1 sendo sobrescrito venham antes <\/strong>das nossas altera\u00e7\u00f5es no processo de mesclagem de XML’s do Magento. <\/p>\n\n\n\n
    Isso \u00e9 feito adicionando o m\u00f3dulo em quest\u00e3o na <sequence><\/code> do nosso etc\/module.xml<\/code>.<\/p>\n\n\n
    <?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module\/etc\/module.xsd">\n    <module name="Magenteiro_OverridePhtml" setup_version="1.0.0">\n        <sequence>\n            <module name="Magento_Newsletter"\/>\n        <\/sequence>\n    <\/module>\n<\/config><\/pre>\n
    <\/p>\n\n\n
    Resultado<\/h2>\n\n\n\n
    Feito isso, logo poderemos ver o nosso arquivo de template sendo carregado no lugar do antigo.<\/p>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
    H\u00e1 ainda outras formas de se sobrescrever um template, como por exemplo com o uso de Plugins, Preferences e outras formas. Embora Plugins e Preferences sejam t\u00f3picos abordados no nosso curso de Magento 2<\/a>, h\u00e1 um artigo muito bom da Classy Llama<\/a> (em Ingl\u00eas) que aborda em detalhes outras formas de se fazer isso.<\/p>\n\n\n\n
    Por fim, caso queira fazer download do m\u00f3dulo desenvolvido neste exemplo, preencha seu nome e e-mail abaixo.<\/p>\n\n\n\n