Há 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. Alguns itens não mudaram, é claro!

caminho das pedras - imagem: Philip Lee Harvey/Cultura

Temas são a área do Magento que dão mais dor de cabeça. Não que temas sejam mais complicados que módulos, pelo contrário, mas creio que justamente por essa falsa aparência de que “não é difícil” e porque muitos profissionais pensarem que “um tema de Magento não pode ser mais complicado que um layout em WordPress”, é sempre neles que a corda arrebenta. Se você quer trabalhar com temas, já escrevi alguns artigos no blog que somados podem ajudar bastante e podem constituir um roteiro.

Mas se você quer dar o primeiro passo, então essas são as dez coisas essenciais que você precisa saber sobre temas no Magento, na versão 2014. Vamos a eles:

  1. Isso nunca vai mudar! Antes de trabalhar com temas no Magento, lembre-se de desabilitar o cache. O cache é a coleção de arquivos que responde pela construção mais rápida de uma página da loja, de modo que ela esteja como “pré-pronta”: ao invés de reunir dezenas de arquivos a cada vez que uma página é solicitada, o cache do Magento deixa essa página montada em um arquivo, salvando tempo e recursos do servidor. Mas, o cache faz com que a página seja na verdade uma fotografia do passado e se você estiver fazendo alterações no tema, quer vê-las na hora! Portanto, vá em Sistema > Gerenciar Cache, marque todas as opções, selecione Desativar e deixe assim até que a loja vá para o ambiente de produção.
  2. Antes de querer desenvolver um tema do zero, considere a possibilidade de comprar um tema para Magento, pronto, já construído e disponibilizado em uma loja de temas. Ao usar um tema pronto, você normalmente tem acesso a todos os arquivos com as fontes e pode personalizá-lo como desejar. É muito mais fácil, rápido e barato modificar um tema que já esteja pronto, do que construí-lo do zero.
  3. Seja comprando um tema pronto ou partindo do zero, você precisará fazer alterações no tema. Lembre-se que os arquivos estão divididos em duas pastas – /app/design e /skin. A primeira concentra os arquivos do Layout, Locale e do Template enquanto a segunda é o próprio Skin. Dentro delas, você encontrará os pacotes de design, que são famílias de temas, como /meu-tema/default e /meu-tema/versao-1, além do Base/Default. Procure entender as funções de cada área de um tema no Magento e mantenha a organização dos arquivos.
  4. Nunca, jamais, em hipótese alguma, nem mesmo com ordem do Papa Francisco (sim, ele é admirado por todos, mas não entende muito de Magento), altere os arquivos do tema Base/Default. Esse tema faz parte da instalação nativa do Magento e como o próprio nome diz, serve como base para os temas personalizados. Se você alterar esses arquivos, certamente enfrentará problemas em sua loja virtual, acredite em mim e aceite esse fato.
  5. Pra construir um tema personalizado, você deve verificar as alterações a serem feitas, localizar os arquivos que respondem por essas alterações e cloná-los em seu tema, respeitando o caminho. Por exemplo, para alterar a posição do bloco do Carrinho, na lateral, é preciso modificar o arquivo checkout.xml. Esse arquivo originalmente está disponível em /app/design/frontend/base/default/layout/ e você deve cloná-lo para o caminho /app/design/frontend/meu-tema/default/layout, mantendo o arquivo original intocado e fazendo as mudanças no arquivo que estará na pasta de seu tema. Clone apenas os arquivos que você utilizará; quem não for modificado, deve permanecer apenas no tema Base/Default.
  6. Se você estiver perdido ao determinar qual arquivo é responsável pela modificação que você precisa fazer, utilize a ferramenta Dicas de Caminhos de Template. Ela está disponível em Sistema > Configuração :: Desenvolvedor > Debugar :: Exibir Caminho das Telas. Porém, essa função só é exibida se você selecionar um nível diferente de Todas as Lojas. Então, depois de navegar pelo caminho dado, vá no canto superior esquerdo, busque a caixa Aplicar Em e clique no nome do Website ou da Visão de Loja, para selecioná-la e liberar o acesso. Aí, basta salvar e atualizar seu site para que a mágica aconteça.
  7. Você pode usar a arquitetura default/meu-tema, isto é /app/design/frontend/default/meu-tema, ao invés de meu-tema/default. O Magento vai funcionar porém você terá que lidar com mais arquivos caso queira utilizar as variações de tema, como layouts específicos para promoções ou épocas festivas. Portanto, sempre prefira utilizar pacotes de design próprios, fora do default do Magento, isto é, meu-tema/default, meu-tema/variacao-1, meu-tema/variacao-2  e assim sucessivamente.
  8. O Magento tem a ferramenta de tradução inline, mas eu não recomendo seu uso. Ao invés disso, construa suas traduções do modo tradicional, usando as entradas corretas de texto no Template e criando o arquivo CSV com as correspondências no Locale. Seu tema sempre deve ter as entradas em inglês, com o CSV tanto em inglês como no idioma a ser utilizado na loja virtual.
  9. Quando você estiver pensando no design, tenha em mente a estrutura modular de um tema no Magento. Quanto mais complicado for um design, quanto mais distante ele estiver do tema Base/Default, mais tempo será investido no desenvolvimento e portanto, maior orçamento requerido. Além disso, não se esqueça que muitas funções precisam de módulos adicionais e esses módulos também precisam ser customizados.
  10. Você pode vender temas em Magento! Depois que você ficar bom em temas, que tal começar a ganhar dinheiro com isso? As principais lojas de temas têm modelos para compra de temas, pagando um valor definido, ou inserção no marketplace, em que seu tema fica disponível e você recebe uma comissão pelas vendas.

E você, tem mais itens a serem inseridos nessa lista? Acha que algum item da lista de 2010 deve voltar a aparecer aqui? Os comentários estão abertos.


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.

6 Comments

Gustavo Concon · 14/11/2014 at 13:29

André, uma dúvida. Os tipos de layout estruturais do Magento são fixos? Digo, quando vamos criar uma página no CMS existem 4 opções de layouts (Vazio, 1 coluna, 2 colunas, 3 colunas e etc). No meu tema, quero criar um tipo “3 linhas”, ou Header/Content/Footer. Onde isso é configurado?

Andre Gugliotti · 18/11/2014 at 07:41

Gustavo, você precisa criar um novo template para o seu tema e registrá-lo no XML. Ele só não estará disponível nas páginas do CMS, pois isso depende de mudanças no core.

Gustavo Concon · 18/11/2014 at 13:56

Saquei! Obrigado André.

Alessandro Sales · 28/05/2015 at 09:29

Excelente!

Dez coisas que você precisa saber sobre temas no Magento · 10/04/2014 at 12:34

[…] uma nova versão desse artigo, atualizada. Saiba quais são as dez coisas que você precisa saber temas no Magento, versão […]

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

[…] 7) 10 coisas que você precisa saber sobre Temas no Magento, versão 2014 […]

Deixe uma resposta