Não copie nenhum XML no seu tema Magento, o local.xml configura todos os blocos do frontend
Veja aqui como usar este recurso em 5 passos:
Neste artigo vou falar arquivo local.xml, ele elimina a necessidade de copiar qualquer outro XML para dentro do seu tema. Nele você vai configurar todos os blocos do seu tema sem dificuldade através destes 5 passos.
Usarei como exemplo o mesmo arquivo que está em meu tema para lojas Magento Alpha Better que você já pode baixar gratuitamente. Pra não deixar o artigo tão grande assumo que você já tenha uma noção básica de o que é XML então vamos direto ao que interessa:
Antes crie seu arquivo local.xml que terá essa estrutura:
<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <!-- conteúdo --> </default> </layout>
O nó principal sempre será layout, esse é um padrão do Magento, dentro virão os nós que se relacionam com o tipo de página ou conteúdo, para achar os nomes específicos você vai precisar olhar nos arquivos XML da pasta base.
1 – Elimine o que não precisa
Agora que temos a estrutura básica exclua aqueles banners que vem com o tema padrão do Magento, a enquete e PayPall. Use o nó <remove> para cada item que deseja excluir do tema. No caso faremos dentro de default para excluir de todas as páginas. A estrutura é essa: <remove name=”nome do bloco” /> caso tenha outros blocos que queira excluir você precisará ativar o debug do magento para descobrir o nome específico do bloco.
Agora nosso arquivo XML ficou assim:
<?xml version="1.0" encoding="UTF-8"?> <layout> <default> <!-- Remove callouts and rarely used stuff --> <remove name="right.poll"/> <!--remove enquete do lado direito--> <remove name="right.permanent.callout"/> <!--remove banner do lado direito--> <remove name="left.permanent.callout"/> <!--remove banner do lado esquerdo--> <remove name="paypal.partner.right.logo"/> <!--remove banner do paypall--> </default> </layout>
2 – Defina o layout da página
É muito fácil alterar o layout da página. O Magento vem por padrão com 3 colunas, mas aqui vou usar uma coluna por padrão, tudo que precisamos é acessar o bloco root por referência e setar o arquivo que queremos que ele use, o resto é sempre igual.
Veja:
<reference name="root"> <action method="setTemplate"><template>page/1column.phtml</template> <!-- Mark root page block that template is applied --> <action method="setIsHandle"><applied>1</applied></action> </action> </reference>
<reference name=”root”> chama um bloco já existente para editá-lo
<action method=”setTemplate”><template>page/1column.phtml</template> manda fazer a ação de setar o novo arquivo de template, estes são os arquivos que já vem dentro do magento mais usados
1column.phtml – sem coluna
2columns-left.phtml – uma coluna na esquerda
2columns-right.phtml – uma coluna na direita
3columns.phtml – duas colunas
3 – Insira seus css e Java Scripts
Eles devem ser inseridos no bloco head use novamente nó especial reference com o name=”head” e dentro dele usaremos o action como vemos abaixo:
<reference name="head"> <action method="addCss"><stylesheet>css/local.css</stylesheet></action> <action method="addItem"><tipe>skin_js</tipe><name>js/local.js</name></action> </reference>
Com isso o magento vai procurar na pasta: skin/frontend/default/meu_tema/
Observação: existe o método addJs, mas o seu arquivo não vai fiar na mesma pasta do seu tema.
4 – Crie novos blocos
Criar novos blocos com certeza confunde muita gente, neste exemplo vou usar um método bem simples, colocarei o formulário de newsletter no rodapé do site, mas antes disso vou excluí-lo da coluna da esquerda inserindo esse nó junto das outras remoções:
<remove name="left.newsletter"/>
Com isso eu removi a newsletter da esquerda e agora vou aproveitar este mesmo arquivo para colocar no rodapé do site inserindo um bloco, fica assim:
<reference name="footer"> <block type="newsletter/subscribe" name="newsletter" as="newsletter" template="newsletter/subscribe.phtml" after="footer"/> </reference>
Agora dentro do arquivo footer.phtml do meu tema (sim já tinha copiado este arquivo para dentro do meu tema) vou inserir a seguinte linha de código no lugar que eu quero que a newsletter fique:
<?php echo $this->getChildHtml('newsletter') ?>
Sabendo o “type” do bloco fica bem fácil, sempre veja os arquivos xml do tema base para se familiarizar com eles, talvez faça um sobre isso, mas para este tutorial esta explicação basta.
5 – Edite páginas especificas
Toas edições que fiz até agora foram dentro do default, para todas as páginas do meu frontend mas agora vou editar especificamente as páginas de catálogo de produto, então fora do nó <default> crie o nó <catalog_category_view> para editar estas páginas. Para saber mais é bom olhar os arquivos XML do tema base, nomes são intuitivos e fáceis de entender.
Dentro deste nó fica assim:
<catalog_category_view> <reference name="root"> <action method="setTemplate"><template>page/2columns-left.phtml</template> <!-- Mark root page block that template is applied --> <action method="setIsHandle"><applied>1</applied></action> </action> </reference> </catalog_category_view>
Pronto com esses 5 passos acredito que ficou mais fácil editar o config.xml, claro que seu tema pode precisar de mais ou menos configurações, eu não disse que é fácil mas acredito que agora um caminho.
Espero que este artigo tenha sido útil a você, caso queira compartilhe esta página e ajude a divulgar meu site e assim poderei trazer mais tutoriais.
Caso tenha ficado dúvidas, comente aqui.
Um abraço.
Este conteúdo foi interessante? inscreva-se pelo botão abaixo para receber tudo que falo sobre Magento
[egoi-magento]
Olá Ronaldo,
muito obrigado pelo post, esta me ajudando muito em duvidas de layout.
Porém tenho uma duvida que pode parecer até basica. Criei o arquivo e gravei na pasta lyout do meu template aonde devo informar que esse é o arquivo de configuração do meu layout?
Olá Diego,
Não ficou claro que arquivo novo é esse, se criar um arquivo xml com um nome aleatório o Magento não vai ler esse arquivo. Sobrescreva os arquivos do base/default em seu tema ou use o local.xml.
Você não precisa informar o arquivo layout.xml, o Magento vai procurar automaticamente no tema configurado.
Um abraço.
amazing code my brother
valeu ai safaduxo
curti bastante
rsrsrs
Att,
Cornélio José Wiedemann (TI & DBA)
vlw amigo!
Olá, estou com uma dúvida o arquivo local.xml ele pode ser criado em que local da estrutura de arquivo do tempalte? por exemplo crio ele no mesmo diretório que o page.xml?
Sim, todos os XMLs ficam na pasta layout
um abraço.
Olá Ronaldo, parabéns pelo post. Gostaria de saber se tem como excluir o prototype.js e outros JS de uma paginas personalizada.phtml.
Obrigado Rodrigo,
você pode fazer isso com xml, usando a tag
<action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action>
Por exemplo se quisesse tirar o prototype apenas da home da loja o código ficaria assim:
<cms_index_index>
<reference name="head">
<action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action>
</reference>
</cms_index_index>
quais pastas devo copiar para dentro do meu tema e onde devo salvar cada arquivo que você criou acima?… por favor seja especifico.
Os arquivos e pastas são de acordo com o que você precisa alterar, para mais detalhes veja essa sequência de artigos:
Como criar um tema responsivo no Magento 1.9
Ola Ronaldo como estas?, espero que bem… Ronaldo em que pastas devo salvar os passos de 1 a 5?… por favor, se possível especifique cada passo referente a cada pasta… se não for pedir muito, por favor, obrigado.
Dentro do seu tema personalizado, por exemplo, se você utilizar como base o default/default, vai criar seu tema em default/personalizado