Sequência dos artigos
- Como criar um ambiente de trabalho para cirar temas Magento 1.9
- Como fazer a estrutura básica
- Como manipular o CSS
- Como lidar com imagens
- Como trabalhar com arquivos de layout (XML)
- Como trabalhar com arquivos de template (PHTML)
- Como personalizar a tradução dentro do tema
- BÔNUS: Como manipular o slideshow nativo do Magento 1.9
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.
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:
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:
Como trabalhar com o slideshow do Magento 1.9
Como personalizar a tradução dentro do tema Magento 1.9
Como manipular o visual pelo css no Magento 1.9
Como inserir um bloco estático diretamente no PHTML (php) do Magento
Como criar uma loja virtual
Como inserir um ícone no link sem usar uma classe específica
Respostas de 21
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.
Obrigado Lucas,
este artigo deve te ajudar:
Principalmente no passo 3 onde falo como inserir arquivos css e js pelo xml
Um abraço
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
Obrigado, para essas alterações você precisa alterar o xml ou o phtml
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.
verifica no arquivo.phtml o tamanho que ele está utilizando, o Magento redimensiona qualquer imagem de produto para o tamanho que deve ser usado
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.
esse arquivo da versão 1.7 não tem no rwd, mas se você copiar pra dentro do seu tema personalizado deve funcionar
to quebrando a cabeça, onde traduzir o Account/Cart
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…
tem como mudar o search box para o topo no centro dentro da header no tema rwd
Sim, dá pra fazer isso apenas com CSS
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.
essa é uma das maiores dificuldades, o melhor é seguir o conteúdo diretamente no site oficial do magento no menu SUPPORT > Documentation
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.
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