Há uma nova versão desse artigo, atualizada. Saiba quais são as dez coisas que você precisa saber temas no Magento, versão 2014!

Temas para Magento - imagem: blog.velite.deConstruir layouts no Magento Commerce é uma das principais dificuldades entre os profissionais da área. O Magento usa uma combinação de PHTML + XML para montar as páginas a serem exibidas, espalhando seus arquivos por dezenas de pastas, deixando novatos no software completamente perdidos. Separei dez dicas sobre como construir temas no Magento sem ficar maluco.

É claro que só essas dez dicas não vão torná-lo expert em temas, mas espero que sirvam como um começo pra quem quer estudar. A dica como sempre é o próprio site do Magento, em especial o Designer’s Guide to Magento. Vamos às dicas:

  1. antes de testar qualquer tema, lembre-se de desabilitar o cache. Devido ao alto número de pastas e arquivos usados para montar um tema, o Magento usa um sistema de cache, que permite que as páginas sejam armazenadas em um diretório separado e fiquem prontas para exibição. Se o cache estiver ligado, você pode alterar as páginas quanto quiser que na loja nada mudará. Para desabilitar o cache, na versão 1.4, vá em Sistemas -> Gerenciamento de Cache. Marque todos os caches, selecione Desativar e clique em Executar
  2. os temas no Magento são separados em duas pastas. A primeira pasta é a /app/design/frontend, que contém os arquivos referentes ao esqueleto do tema, ou seja, as peças que constituirão a estrutura da página. No outro lado, na segunda pasta, em /skin/frontend, fica o acabamento da página, representado pelas imagens, estilos CSS e javascripts. Dentro dessas pastas estão os jogos de temas, sempre em dois níveis, como mostro a seguir
  3. o Magento conta com um tema padrão. Esse tema é chamado ‘default’ e não deve ser alterado. Vou repetir: o tema ‘default’ do Magento não deve ser alterado, seus arquivos devem permanecer como estão, porque é nessa tema que a equipe do Magento faz as alterações em uma atualização. Você encontra os arquivos do tema default em duas sequências de pastas, a /base/default/ e a /default/default, dentro dos caminhos que mostrei no item 2
  4. um pouco mais de confusão: cada grupo de arquivos está dentro de uma pasta específica. Layouts para os arquivos XML responsáveis pelo posicionamento dos blocos, templates para os arquivos PHTML com os códigos dos blocos em si e locale para os arquivos de tradução específica para o tema. Css para as folhas de estilo CSS, images para as imagens e js para os scripts
  5. antes de começar a montar seu tema, crie um jogo de pastas com o nome do tema, dentro da pasta default. Então, você terá algo como: /app/design/frontend/default/meutema e aqui dentro as pastas layout, locale e templates; do outro lado, /skin/frontend/default/meutema e dentro as pastas css, images e js. Vá até o painel de controle de sua loja de testes e habilite o tema, acessando Sistema -> Configuração, aba Template e depois Temas. Digite meutema em Traduções, Modelo, Skin e Layout, depois clique em Salvar
  6. se você veio do tema padrão, quando você atualizar o frontend da loja, não verá nenhuma mudança. Isso porque o Magento usa um esquema de hierarquia, onde primeiro ele carrega os arquivos do tema escolhido e depois busca no tema padrão todos os arquivos que ele não encontrar no tema escolhido. Onde pra muitos é uma complicação, essa é uma das grandes vantagens do Magento, pois permite que se construa um tema novo e exclusivo mexendo apenas em poucos arquivos, sem que se tenha que reconstruir o tema
  7. entenda a estrutura do Magento ao distribuir os arquivos. Ele é feito de muitos pequenos arquivos – às vezes, a licença que está presente em todos os arquivos tem dez vezes mais linhas que o próprio código. Porém, faz com que cada arquivo ou função esteja presente em um lugar muito específico. Então, para mexer com blocos que tenham a ver com o cliente, o consumidor, o arquivo a ser trabalhado é o customer.xml. Se a intenção for mexer na estrutura da página, como o layout de 3 colunas, então o arquivo é o page.xml. Para alterar elementos relativos à lista de desejos ou favoritos, o arquivo é o wishlist.xml
  8. o mesmo vale nos blocos: dentro da pasta template, para montar a página do produto, uma série de arquivos é acionada, basta olhar dentro de template/catalog/product. Apesar de usar dez arquivos de blocos PHTML para montar uma página, cada elemento está muito bem segmentado, o que permite mudanças pontuais e precisas
  9. quando se está perdido em determinar a origem de cada pedaço do código, a dica é usar o “Template Path Hints”, uma função que exibe no frontend o endereço de cada arquivo utilizado para montar a página. Para ligá-lo, vá em Sistema -> Configuração e selecione uma visão de loja específica no canto esquerdo superior da tela. A função não funciona se não houver uma loja selecionada. Depois vá em Desenvolvedor, Debugar, Exibir Caminho das Telas e desmarque a caixa Usar Website. Aí você poderá marcá-la como ‘sim’ e clicar em Salvar. Ao atualizar a loja, os caminhos serão exibidos e você saberá qual foi o arquivo que originou cada pedacinho daquela página
  10. com isso, o processo passa a ser mecânico: você deve copiar o arquivo original desejado, da pasta do tema padrão para o mesmo caminho na pasta do seu tema. Se você precisa modificar o catalog.xml, então deve copiá-lo do tema padrão para /app/design/frontend/default/meutema/layout. Se você precisa modificar a caixa de busca que fica no alto da tela, você deve copiar o arquivo form.mini.phtml para /app/design/frontend/default/meutema/catalogsearch. E assim por diante, para todos os arquivos que precisar alterar. É claro que as alterações ficaram nos arquivos copiados, mantendo os intactos originais. E os arquivos que não forem modificados, seguem sendo acionados a partir do tema padrão. Assim, um tema básico precisará de mais ou menos 50 arquivos, bem menos que os quase 500 arquivos presentes no tema padrão do Magento

Difícil? Bom, eu nunca falei que era fácil. Mas pode ter certeza de que não é impossível e depois que você tiver prática, vai ser difícil se acostumar com o esquema de templates de mecanismos mais simples como o Joomla e o WordPress.


André Gugliotti

André Gugliotti é uma das referências em Magento no Brasil, autor dos livros "Lojas Virtuais com Magento", "Temas em Magento" e "Módulos para Magento". Nesse blog, ele fala sobre e-commerce e marketing digital, ensinando como montar e gerenciar sua loja virtual.

9 Comments

Matheus Bedoni · 04/11/2010 at 10:47

André, Ótimo post!
O item 9 é uma preciosidade!!
Obrigado.

Santiago · 24/03/2011 at 07:59

Excelente texto!

André Gugliotti · 24/03/2011 at 08:59

@Santiago
Obrigado pela visita e esteja à vontade para comentar e sugerir novos conteúdos!

Santiago · 25/03/2011 at 08:26

Bom dia.

Primeiramente quero me desculpar por utilizar este espaço para expor meu caso, mas estou tendo dificuldade justamente com o Magento, tema do seu texto nesta página.

Há vários dias venho explorando a net e falando com profissinais para resolver uma questão que aparentemente parece ser simples mas ainda está sem solução.

Ontem falei com um profissional Magento e fui informado de que o programa que estou tentando instalar na minha loja não pode rodar devido às configurações do Magento. Na busca de uma segunda opinião vim aqui explorar um pouco dos seus conhecimentos.

Estou tentando instalar um link imagens do tipo carrossel na minha loja, encontrei na internet um programa muito interessante em Flash XML já disponibilizado para o uso, bastanto apenas algumas modificações.

Para ser mais direito vou deixar o link do referido site: http://www.flashxml.net/3d-carousel-menu.html.

Obrigado.

André Gugliotti · 25/03/2011 at 08:53

@Santiago
Fique à vontade! Se tu pedires pra eu simplesmente fazer o teu trabalho, eu vou ficar bravo, mas pedir informações sobre como tu podes melhorar a tua loja, não me importo nem um pouco de ajudar.

O q eu entendi desse 3D Carousel: ele é uma galeria dinâmica de fotos, com links, descrições e imagens sendo puxadas automaticamente de um arquivo XML.
Imagino q o q teu profissional quis dizer é q ele não vai puxar automaticamente os produtos (informações) do banco de dados. Tu terás q montar isso manualmente ou solicitar o desenvolvimento de um módulo q faça esse serviço.
Não testei o módulo dentro do Magento, mas não me parece q ele possa causar conflito com o Scriptaculous/Prototype. Pra confirmar, apenas testando. Então, acredito q ele funcione, porém não de maneira vinculada ao painel de controle.

Santiago · 25/03/2011 at 09:21

Você faz esse tipo de serviço? Por favor, me envie um e-mail com mais informações. Fique à vontade para apagar minhas mensagens, já que este assunto está ficando um pouco fora do tema da página.

Obrigado.

Santiago · 26/04/2011 at 09:12

Bom dia.

Perdi seu e-mail e gostaria de fazer contato para tratar de alterações numa loja Magento.

Obrigado.

Dez coisas que você precisa saber sobre temas no Magento (de novo) | Lojas Virtuais com Magento, por André Gugliotti · 08/04/2014 at 16:30

[…] mais de três anos, eu escrevi um artigo chamado Dez coisas que você precisa saber sobre um tema no Magento. Pra aproveitar o lançamento do novo livro de Temas, achei que valia a pena atualizar esse artigo. […]

Posts sobre Temas em Magento | eCommerce com Magento · 22/09/2014 at 15:41

[…] 2) 10 coisas que você precisa saber sobre Temas no Magento […]

Comments are closed.