Dez coisas que você precisa saber sobre temas no Magento

Construir 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.