Como trabalhar com arquivos de layout (XML) no tema Magento 1.9

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

Você também vai gostar:

Respostas de 21

  1. Olá Ronaldo, bom dia!
    Há pouco tempo estou trabalhando com Magento, e buscando informações sobre Magento encontrei o seu blog que tem me ajudado muito.
    Estudei a apostila que você traduziu e quero me aprofundar muito nessa ferramenta magnífica que é o Magento.
    Uma dúvida que tenho sobre é adicionar novos arquivos js ou css no tema como por exemplo na construção de um banner ou qualquer outro plugin.

    Responder

  2. Parabens por oportunizar este ambiente de enriquecedor de aprendizagem, muito instigante, fiz a alteração acima ficou otimo. estou com problema na primeira pagina, quando configuro para exibir 12 produtos na page com layout 1 coluna fica perfeito. mas quando mudo para 2 colunas surge, surge um espaço entre a primeira linha de produtos e a seguinte, fica um espaço em branco esquisito, como ajustar neste tema rwd, outra coisa gostaria de mudar o banner para header

    Responder

  3. Em relação ao post anterior agora esta criando espaço espaço entre a primeira e segunda linha de produtos no layout 1 coluna tambem, como resolver isto, aff, esse tema parecia legal, estou cadastrando 3 imagens por produto de 500×500 px.

    Responder

    1. verifica no arquivo.phtml o tamanho que ele está utilizando, o Magento redimensiona qualquer imagem de produto para o tamanho que deve ser usado

      Responder

  4. Como nao tenho muitos produtos para exibição no front da loja gostaria de colocar exibição randomica de produtos. Na versao 1.7 esse codigo func legal mas no rwd 1.9 ta estranho, gostaria de exibir 12 produtos e 5 produtos por linha, estava usando este,

    6
    6

    bundle/catalog/product/price.phtml

    pode haver aulguma imcompatibilidade, o espaço q fica em branco entre uma linha e outra é porque talvez nao apareça comparar produtos e acicionar a cesta ????, da uma força.

    Responder

  6. resolvi!!!! desculpa o imcomodo, backend/configurações/avançado/desenvonvedor/ habilitar tradaução inline- salvar – atualiza a pagina, faz mouseover- digita sua traduçao em custom, vou precisar de muita ajuda ainda…

    Responder
  8. Pingback: Como manipular o visual pelo css no Magento 1.9 | Ronaldo Diniz

  9. Olá, Ronaldo. Existe algum repositório de informações que explique cada tag XML padrão do Magento? Por exemplo, sei que o é o catálogo de categorias com camadas, mas sei um ou outro, não todos, porque não achei essa informação em nenhum lugar. Outra dúvida bem comum é os tipos de blocos, são muitos, mas não tem nada bem explicado pela internet. Pelo menos não consegui encontrar nada além do superficial.

    Estou estudando, e tenho alguma dificuldade de entender cada uma das tags, pois me parece que a documentação oficial não relaciona todas as existentes, dificultando bastante o estudo por conta própria.

    Responder

    1. essa é uma das maiores dificuldades, o melhor é seguir o conteúdo diretamente no site oficial do magento no menu SUPPORT > Documentation

      Responder
  10. Pingback: Como trabalhar com o slideshow do Magento 1.9 | Ronaldo Diniz
  11. Pingback: Como Criar a Estrutura Básica Tema Magento 1.9 | Ronaldo Diniz
  12. Pingback: Como personalizar a tradução dentro do tema Magento 1.9 | Ronaldo Diniz
  13. Pingback: Como criar um ambiente de trabalho para cirar temas Magento 1.9 | Ronaldo Diniz

  14. Boa noite!!
    Tem alguma fora de alterar o numero de produtos por linha de acordo com resolução de tela usando algo do tipo ou somete atraves do media query.
    Obrigado desde ja.

    Responder

    1. nos arquivos de layout do tema pode-se definir o número máximo de colunas de produtos de acordo com o tipo de layout, se é uma coluna, duas coluans a esquerda, duas colunas a direita ou três colunas
      pra trabalhar o número de colunas de produtos conforme a resolução da tela é pelo css mesmo

      Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.