Já se vão quase dois anos da última vez que eu escrevi um post falando sobre construção de temas em Magento. Apesar de nesse período não ter mudado absolutamente nada em relação a como se constroi um tema em Magento, achei interessante voltar ao assunto, ainda mais agora que novos leitores chegam atraídos pelo conteúdo do livro “Lojas Virtuais com Magento”. Um tema no Magento é a cara de sua loja, a apresentação visual que ela terá; um tema no Magento é tudo aquilo que o seu cliente vê, também conhecido como frontend ou frente de loja.
Se o tema é justamente aquilo que o cliente vê, não é preciso reforçar a importância de um tema bem construído, seguindo conceitos de usabilidade, de navegação, de facilidade de acesso e localização, com imagens bens construídas e elementos bem posicionados. Aqui já aparece uma grande vantagem do Magento: a possibilidade de usar múltiplos temas e substituí-los sem que se perca os elementos da loja em si, como catálogo, clientes e pedidos. No Magento, o tema é “descolado” do núcleo, dos demais elementos, e ele pode ser facilmente alterado, desde que se tenha respeitado as boas práticas de codificação. Se você ainda não tem orçamento suficiente para desenvolver um tema personalizado ou não sabe direito como o seu público reage a diferentes layouts, é fácil implantar um tema provisório, que será usado para testar seu mercado até que você tenha certeza de qual é a melhor linha a seguir em seu tema definitivo.
Temas Prontos e Temas Personalizados no Magento
Aliás, aqui já entram dois conceitos interessantes: temas prontos e temas personalizados. Os temas personalizados são aqueles feitos sob medida para sua loja virtual. Assim, ele começa com o desenvolvimento do design, a partir das diretrizes do marketing e de como a loja deverá ser e o que ela deverá ter. Uma vez criado o design e aprovados seus elementos, entra em ação o Magento Fontend Developer, que cuidará de transformar aquele design proposto em uma loja virtual Magento, usando as técnicas próprias para isso. Como o tema foi criado exclusivamente para a loja virtual em questão, o tema é chamado de personalizado e consome uma parcela do orçamento equivalente às horas gastas por esses profissionais.
Do outro lado, existem os temas prontos: há várias lojas de temas na internet, como a Template Monster, a Hello Themes e a Themes Forest, que vendem temas para Magento. Você pode navegar pelo catálogo dessas lojas e escolher um layout que seja mais próximo do seu negócio, daquilo que você vai vender e de como o seu público gosta de navegar. Escolhido o tema, o processo é de uma compra normal, recebendo os arquivos que fazem parte do pacote e instalando em sua loja. Na maioria das vezes, o pacote traz a fonte, permitindo modificações e personalizações.
O preço desses temas varia entre 50 e 300 dólares, um valor consideravelmente menor que o desenvolvimento de um tema personalizado, mas é altamente vantajoso para lojas menores ou que estejam começando. Ele não é exclusivo – outras lojas já utilizavam o tema e ele continuará à venda – mas cumpre o que promete e fará com que sua loja tenha uma cara mais profissional do que utilizar os temas gratuitos convencionais (ainda hoje, muitas lojas usam os temas Classic e Absolute, muito comuns nos primeiros anos do Magento). E assim como no tema personalizado, uma vez que você tem acesso à fonte, é possível incrementar o tema pronto, fazendo pequenas correções e modificações.
Estrutura dos Arquivos
Quando eu dou aula de Magento, dentro dos nossos cursos, há um mantra que eu sempre repito e já virou lenda entre os meus alunos. O Magento possui uma divisão rígida entre os seus arquivos e dentro do tema não é diferente. De um lado, existe um pacote de arquivos compreendido pela pasta base/default; do outro, os pacotes de design que serão utilizados para construir o seu tema, o tema que será utilizado na loja virtual. O base/default é o repositório do sistema e não deve ser modificado em hipótese alguma. O máximo que se permite é clonar os arquivos necessários, respeitando a mesma hierarquia de pastas no tema personalizado. Eu explico isso tanto no livro, como no post sobre Temas em Magento que já citei anteriormente e recomendo que você dê uma olhada em ambos.
Dentro do seu pacote de design, você encontra três grandes áreas: layout, template e skin. De uma maneira simples, o layout é o responsável pelo posicionamento dos blocos enquanto o template são os arquivos que constroem os blocos em si, ou seja, o template são os arquivos PHTML (PHP + HTML) que formarão a estrutura do tema e o layout são os arquivos XML que dizem se aquele bloco aparecerá e onde ele aparecerá. Por cima disso tudo aparece o skin, que é composto pelos arquivos CSS, JS e imagens, dando a cara final que o seu tema terá. Apesar de guardar semelhanças com outras plataformas, cada uma dessas pastas tem as suas particularidades e métodos apropriados de trabalho.
Complementar a essa estrutura de arquivos, ainda há outros dois elementos que fazem parte do visual da loja: o locale, que corresponde à tradução específica para aquele tema e é um arquivo CSV, e o CMS, que está dentro do painel de controle e permite que se crie o conteúdo das páginas do site e também os blocos estáticos, pedaços de código HTML gerenciáveis pelo painel, armazenados no DB, e que são utilizados para construir determinados elementos de seu tema.
Boas Práticas na Construção de Temas
Muitas pessoas reclamam que os temas no Magento são complexos e difíceis de trabalhar e elas estão certas. Porém, a partir do momento que se conhece melhor a estrutura dos temas, não há como não virar um fã do time de desenvolvimento.
Se você seguir regras simples como não mexer no base/default, mantiver os arquivos fiéis às suas funções, com uma estrutura organizada, codificar sempre pensando que menos é mais e pensar nos desenvolvedores que virão depois de você, a tarefa de construir um tema será sempre legal e produtiva. Você também pode consultar um post que escrevi há muito tempo, mas que tão cedo não ficará desatualizado. Ele se chama Dez coisas que você precisa saber sobre Temas no Magento. Boa sorte!
