Sequência dos artigos

Olá, dando continuidade sobre a criação de tema responsivo se baseando no tema padrão do Magento 1.9 agora vamos falar dos arquivos de layout, muita coisa que posso dizer aqui você já deve ter visto em meu outro artigo Como criar um tema magento – local.xml em 5 passos.

Layouts são arquivos XML simples que tem a função de montar as páginas de acordo com uma lógica, mas na prática não são tão simples assim e pode confundir iniciantes. É muito importante manter a organização destes arquivos para que você profissional que atualizar o tema possa trabalhar sem problemas com seu tema, inclusive você mesmo.

Diferente do pacote default, onde tínhamos muitos elementos indesejáveis e acabávamos por removê-los, no tema rwd temos elementos de menos, quer dizer que a necessidade de manipular estes arquivos diminuiu muito. Vamos começar pela tela de produto que aparece o layout de uma coluna vamos mudar para o layout de duas colunas a direita, primeiro darei um exemplo usando o arquivo do tema e depois o mesmo exemplo usando o local.xml.

Produto com uma coluna

Trocar o layout da tela de produto de uma coluna para duas colunas a direita

Copie catalog.xml localizado em:
app/design/frontend/rwd/default/layout/catalog.xml
para a dentro do seu tema em:
app/design/frontend/rwd/red/layout/catalog.xml

IMPORTANTE: não mova ou edite o arquivo original diretamente.

Abra o arquivo em seu editor e localize o seguinte código:

<!--
 Product view
 -->
   <catalog_product_view translate="label">
        <label>Catalog Product View (Any)</label>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
 ...

 

Altere para o este:

<!--
 Product view
 -->
   <catalog_product_view translate="label">
        <label>Catalog Product View (Any)</label>
        <!-- Mage_Catalog -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
 ...

 

Atualize a tela de produto e veja o resultado se ficou como mostrado abaixo:

Tela de produto do magento com duas colunas

O uso do local.xml

Para esta única alteração poderíamos ter usado o recurso do local.xml que então não copiaremos arquivo nenhum e seguiremos os seguintes passo:

Criar um novo arquivo local.xml em
app/design/frontend/rwd/red/layout/local.xml

Escrever o seguinte código:

<?xml version="1.0"?>
 <layout version="0.1.0">
 <catalog_product_view>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
 </catalog_product_view>
 </layout>

Salve o arquivo

Temos o mesmo efeito em dois métodos, use um ou outro de acordo com a quantidade de alterações, se for como neste caso use o local.xml mesmo, mas caso faça muitas alterações, prefira copiar os arquivos de layout para dentro do seu tema personalizado.

Com este método você pode reorganizar todas as páginas da loja Magento, como não criei um layout específico não tenho mais modificações para fazer, não vou me delongar mais porque cada alteração de layout é praticamente um novo artigo e assim este artigo teria mais de oito mil palavras. Então este artigo vai chegando ao seu final, não esqueça de compartilhar e curta minha página no Facebook para receber mais novidades.

Um abraço