{"id":2942,"date":"2016-04-05T03:38:54","date_gmt":"2016-04-05T06:38:54","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=2942"},"modified":"2019-03-16T02:45:20","modified_gmt":"2019-03-16T05:45:20","slug":"qual-arquivo-controla-o-que-no-magento-arquivos-de-layout-xml","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/qual-arquivo-controla-o-que-no-magento-arquivos-de-layout-xml\/","title":{"rendered":"Qual arquivo controla o qu\u00ea no Magento? Arquivos de Layout XML."},"content":{"rendered":"<p>O Magento E-Commerce \u00e9 a maior e mais popular plataforma de E-Commerce do planeta.<\/p>\n<p>Lojas virtuais de diversos tamanhos usam o Magento para gerir as vendas de seus produtos.<\/p>\n<p>Neste artigo, mostrarei como\u00a0encontrar o arquivo de layout XML do Magento que controla um bloco de informa\u00e7\u00e3o espec\u00edfico em uma p\u00e1gina e tamb\u00e9m como funcionam e como s\u00e3o organizadas as configura\u00e7\u00f5es dentro deles.<\/p>\n<p>Continue lendo.<\/p>\n<p>\u00c9 comum que usu\u00e1rios se confundam ao analisar a estrutura de arquivos dentro do Layout do Magento, como a estrutura XML, por exemplo.<\/p>\n<p>O Magento possui muitos XML&#8217;s com fun\u00e7\u00f5es espec\u00edficas, mas neste artigo falarei apenas dos temas.<\/p>\n<p>Al\u00e9m disso, este conte\u00fado ser\u00e1 como uma aula e minha inten\u00e7\u00e3o n\u00e3o ser\u00e1 mostrar onde est\u00e1 o que, mas sim a ajud\u00e1-lo a seguir o caminho correto com total autonomia e efici\u00eancia.<\/p>\n<h2>Relembrando as boas pr\u00e1ticas do Magento<\/h2>\n<p>N\u00e3o \u00e9 demasiado lembrar que n\u00e3o devemos alterar os arquivos originais do Magento. Isso pode tornar sua instala\u00e7\u00e3o incompat\u00edvel com atualiza\u00e7\u00f5es ou podemos perder todas as altera\u00e7\u00f5es em uma atualiza\u00e7\u00e3o qualquer. Por isso, sempre crie um tema personalizado, por exemplo: se vai fazer um tema personalizado para o <em>&#8220;rwd\/default&#8221;<\/em>, fa\u00e7a isso no tema <em>&#8220;rwd\/meutema&#8221;<\/em>. Assim voc\u00ea manter\u00e1 os arquivos originais e s\u00f3 haver\u00e1 arquivos personalizados pra se preocupar, o que vai reduzir muito o n\u00famero de arquivos a trabalhar.<\/p>\n<h2>Um arquivo de layout para cada m\u00f3dulo<\/h2>\n<p>A primeira grande raz\u00e3o de tanta confus\u00e3o com os arquivos de layout vem do fato de que tais arquivos n\u00e3o representam as p\u00e1ginas da loja. Na verdade, cada m\u00f3dulo instalado dentro do Magento que tenha alguma apresenta\u00e7\u00e3o no frontend ter\u00e1 um arquivo de layout.\u00a0Mesmo assim, perceberemos que no Magento toda regra tem sua exce\u00e7\u00e3o.<\/p>\n<p>Cada arquivo de layout representa um m\u00f3dulo instalado dentro do Magento. Isso significa que n\u00e3o podemos criar nosso pr\u00f3prio arquivo de layout, a n\u00e3o ser\u00a0que seja o <em>local.xml,<\/em> que serve como um arquivo coringa para personaliza\u00e7\u00e3o de um tema, mas falaremos dele em outra ocasi\u00e3o.<\/p>\n<p>Voltando ao nosso assunto, vejamos alguns exemplos de como funciona um arquivo de layout desta poderosa plataforma de E-Commerce.<\/p>\n<h2>Onde modificar o carrinho de compras?<\/h2>\n<p>Tudo referente ao carrinho est\u00e1 no m\u00f3dulo <em>checkout<\/em>, logo, devemos trabalhar com o arquivo <em>checkout.xml<\/em>. Dentro dele teremos as p\u00e1ginas de carrinho e de checkout sendo declaradas, exemplos:<\/p>\n<ul>\n<li>&lt;checkout_cart_index translate=&#8221;label&#8221;&gt; declara a p\u00e1gina do carrinho,<\/li>\n<li>&lt;checkout_onepage_index translate=&#8221;label&#8221;&gt; declara a p\u00e1gina de checkout,<\/li>\n<li>&lt;checkout_onepage_success translate=&#8221;label&#8221;&gt; declara a p\u00e1gina de sucesso.<\/li>\n<\/ul>\n<p>Ent\u00e3o, se quero modificar alguma coisa dentro da p\u00e1gina do carrinho, o primeiro lugar a se pensar \u00e9 no <em>checkout.xml<\/em> dentro do controlador <em>checkout_cart_index<\/em> (dentro do layout, o n\u00f3 que controla p\u00e1ginas \u00e9 normalmente chamado de controlador). Assim sendo, posso mudar o caminho dos arquivos de template, adicionar ou remover blocos de conte\u00fado e alterar qualquer coisa nessa p\u00e1gina referente ao <em>checkout<\/em>.<\/p>\n<p>Al\u00e9m dos controladores que s\u00e3o declarados dentro do arquivo de layout, tamb\u00e9m teremos alguns outros. \u00c9 o caso do <em>&lt;default&gt;,<\/em> que representa todas as p\u00e1ginas da loja. Qualquer altera\u00e7\u00e3o feita dentro desse controlador afetar\u00e1 toda a loja. Dessa maneira, todas as configura\u00e7\u00f5es referentes ao carrinho e ao checkout estar\u00e3o em <em>checkout.xml<\/em>, logo, se quisesse alterar algo referente ao cat\u00e1logo de produtos eu estaria trabalhando em <em>catalog.xml<\/em>, mesmo que fosse na p\u00e1gina do carrinho<\/p>\n<p>Em <em>checkout.xml<\/em>, dentro do <em>&lt;default&gt;,<\/em> veremos o que o m\u00f3dulo checkout insere em todas as p\u00e1ginas. \u00a0\u00c9 muito interessante abrir esse arquivo pra acompanhar o que vou dizer, mas provavelmente voc\u00ea j\u00e1 deve estar fazendo isso.<\/p>\n<p>Dentro do controlador <em>&lt;default&gt;,<\/em> veremos tr\u00eas n\u00f3s <em>&lt;reference name=\u201dnome_de_um_bloco\u201d&gt;\u00a0<\/em>que \u00e9 um\u00a0tipo de n\u00f3 que solicita ao Magento um bloco de layout ou de conte\u00fado j\u00e1 declarado em outro arquivo de layout. O\u00a0atributo <em>\u201cname\u201d<\/em> se refere ao atributo <em>name<\/em> do bloco em quest\u00e3o. Aqui temos <em>&lt;reference name=&#8221;top.links&#8221;&gt;<\/em> que \u00e9 um bloco de menu criado no arquivo <em>page.xml<\/em> onde encontraremos um <em>&lt;block&gt;<\/em> com atributo <em>name=&#8221;top.links&#8221;.<\/em>\u00a0No caso, aqui \u00e9 declarado um novo bloco do tipo <em>\u201ccheckout\/links\u201d<\/em> e acrescentado dois links atrav\u00e9s do n\u00f3 action.<\/p>\n<p>Deletando qualquer action ir\u00e1 excluir esse link da loja, excluir o bloco vai excluir toda essa altera\u00e7\u00e3o. Poder\u00edamos incluir mais links, mas para\u00a0esta tarefa\u00a0\u00e9 preciso conhecer o m\u00f3dulo e aqui vou me ater a falar sobre os arquivos de layout do \u00a0Magento.<\/p>\n<h2>Mas como saber qual arquivo alterar se n\u00e3o \u00e9 t\u00e3o claro?<\/h2>\n<p><img decoding=\"async\" class=\"alignleft wp-image-2947\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/04\/Magento_responsive.png\" alt=\"Magento_responsive\" width=\"300\" height=\"218\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/04\/Magento_responsive.png 509w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/04\/Magento_responsive-24x17.png 24w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Nem sempre \u00e9 f\u00e1cil dizer qual arquivo de layout controla o qu\u00ea, ent\u00e3o precisamos utilizar o um recurso no Magento que mostra qual arquivo renderiza determinado item\u00a0no frontend. Isso nos permite localizar o arquivo de layout em 90% das vezes.<\/p>\n<ol>\n<li>No admin do Magento v\u00e1 em: <em>Sistema &gt; Configura\u00e7\u00e3o<\/em> e no final da barra lateral clique em <em>Desenvolvedor<\/em>,<\/li>\n<li>Na vis\u00e3o de loja (o dropdown localizado na esquerda) escolha um <em>website ou vis\u00e3o de loja<\/em> que desejar, a tela vai atualizar,<\/li>\n<li>Abra a aba <em>Debugar<\/em>,<\/li>\n<li>Altere <em>\u201cExibir Caminho das Telas\u201d<\/em> para <em>sim<\/em> e salve, e<\/li>\n<li>Atualize a frente de loja a p\u00e1gina que deseja analisar.<\/li>\n<\/ol>\n<p>Se estiver tudo certo aparecer\u00e3o v\u00e1rias caixas tracejadas em vermelho circundando cada bloco e cada uma ter\u00e1 um t\u00edtulo que indica qual arquivo de template (PHTML) \u00e9 utilizado. Verificando esse caminho, veremos a pasta template seguida da pasta do m\u00f3dulo e assim saberemos qual \u00e9 o arquivo de layout que o controla. Por exemplo, se o caminho \u00e9 <em>template\/catalog\/product\/view.phtml<\/em>, o arquivo de layout \u00e9 o <em>catalog.xml<\/em>.<\/p>\n<p>Mas essa t\u00e9cnica n\u00e3o funciona 100% das vezes. Em alguns casos, n\u00e3o \u00e9 utilizado nenhum arquivo e tamb\u00e9m h\u00e1 casos desse recurso n\u00e3o funcionar em alguns temas.<\/p>\n<p>Ent\u00e3o \u00e9 recomendado conhecer bem a primeira t\u00e9cnica. Dessa forma, garantimos encontrar o que procuramos em 100% das vezes.<\/p>\n<h2>Finalizando<\/h2>\n<p>No final das contas, a melhor forma de n\u00e3o se perder configurando o Magento \u00e9 conhecer o Magento e n\u00e3o se preocupar\u00a0se se perder\u00a0no come\u00e7o, isso \u00e9 perfeitamente normal<\/p>\n<p>O Magento \u00e9 um sistema de c\u00f3digo aberto de loja virtual muito robusto e modular, em compensa\u00e7\u00e3o tamb\u00e9m \u00e9 muito complexo para iniciantes.<\/p>\n<p>O\u00a0importante \u00e9 n\u00e3o desanimar e entender como cada parte desse incr\u00edvel sistema funciona.<\/p>\n<p>Um abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Magento E-Commerce \u00e9 a maior e mais popular plataforma de E-Commerce do planeta. Lojas virtuais de diversos tamanhos usam o Magento para gerir as vendas de seus produtos. Neste artigo, mostrarei como\u00a0encontrar o arquivo de layout XML do Magento que controla um bloco de informa\u00e7\u00e3o espec\u00edfico em uma p\u00e1gina e tamb\u00e9m como funcionam e [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":2944,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-2942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-e-commerce"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=2942"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/2944"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=2942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=2942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=2942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}