Tema filho no PrestaShop: personalizar o design sem perder alterações ao atualizar

É a história de muitas lojas: alguém mudou a cor dos botões, moveu um bloco da página de produto e retocou o template do carrinho, tudo diretamente nos ficheiros do tema. Funcionou durante anos. Até que saiu uma versão nova do tema com correções importantes, foi atualizada e todas essas alterações desapareceram. Ou, pior, ninguém se atreveu a atualizar e o tema ficou preso numa versão que já não encaixa no núcleo.

O tema filho existe para evitar exatamente isso.

O que é um tema filho

É um tema que declara outro como pai e que contém apenas os ficheiros que quer mudar. Quando o PrestaShop precisa de um template, procura-o primeiro no tema filho; se não o encontrar, usa o do pai. O resultado é que no filho tem unicamente as suas personalizações, separadas do código do fabricante do tema.

Desde o PrestaShop 1.7 o mecanismo está no núcleo e declara-se no ficheiro de configuração do tema, config/theme.yml, indicando o nome do tema pai. Os temas de origem (Classic e, no PrestaShop 9, Hummingbird) podem ser usados como pai, tal como a maioria dos temas comerciais, embora convenha confirmá-lo com o respetivo autor.

O que vai no tema filho

Folhas de estilo e scripts próprios

O seu CSS e o seu JavaScript vão em ficheiros próprios do tema filho. Pode escolher se o filho carrega também os ficheiros do pai (o habitual, para herdar todo o design e apenas acrescentar por cima) ou se os substitui. Escrever os seus estilos num ficheiro à parte, carregado depois dos do pai, é a forma mais limpa de mudar cores, margens ou tipos de letra sem mexer em nada do fabricante.

Templates que muda de verdade

Se precisar de modificar a estrutura de uma página, copia para o filho apenas esse template, no mesmo caminho relativo que tem no pai, e edita-o aí. Por exemplo, a página de produto ou um bloco concreto do carrinho. Todos os outros continuam a vir do pai.

Melhor ainda: muitos templates do PrestaShop estão organizados em blocos Smarty. Um template do filho pode estender o do pai e redefinir apenas um bloco, em vez de o copiar inteiro. Assim, se o fabricante corrigir algo noutra parte desse template, a correção chega-lhe.

Templates de módulos

Os módulos bem feitos permitem que o tema sobrescreva os seus templates. Colocam-se na pasta modules/ do tema, com o nome do módulo e o mesmo caminho que o template tem dentro do módulo. Funciona da mesma forma num tema filho: personaliza o aspeto de um módulo sem mexer no módulo e, quando o módulo é atualizado, o seu template continua no lugar.

O que não vai no tema filho

• Alterações de lógica. O tema é apresentação. Se precisa de que algo funcione de outra maneira, isso é um módulo, não um template com condições complicadas.
• Overrides de classes do núcleo. Vivem noutra pasta e têm os seus próprios riscos ao atualizar. O facto de uma alteração estar no tema filho não a protege se, na realidade, depender de um override.
• Cópias completas do tema pai. Se copiar todos os templates para o filho «por via das dúvidas», o pai deixa de servir para alguma coisa: nenhuma correção lhe chega e volta ao problema inicial.

Como atualizar o tema pai

Com o tema filho, atualizar o pai é um procedimento previsível:

1. Numa cópia da loja, substitua o tema pai pela versão nova.
2. Faça a lista dos templates que o filho tem e, para cada um, compare a versão antiga do pai com a nova. Se o fabricante mudou esse template, tem de levar as alterações dele para a sua cópia no filho ou confirmar se o seu bloco redefinido continua a encaixar.
3. Reveja o seu CSS: se o pai mudou nomes de classes ou a estrutura do HTML, alguns dos seus estilos deixarão de ser aplicados.
4. Esvazie a cache de templates e de ficheiros combinados, e percorra as páginas principais: página inicial, categoria, página de produto, carrinho, checkout e conta de cliente.
5. Teste uma encomenda completa. Os templates do checkout são os que mais mudam e os que mais estragos fazem se falharem.

Se mantiver um controlo de versões do seu tema filho (nem que seja guardar uma cópia datada antes de cada alteração), este processo é muito mais rápido: sabe o que mudou e quando.

Se já editou o tema diretamente

É o mais habitual, e tem solução:

1. Obtenha o pacote original da mesma versão do tema que tem instalada.
2. Compare ficheiro a ficheiro o seu tema com o original. As diferenças são as suas personalizações (e, às vezes, coisas que ninguém se lembra de ter feito).
3. Crie um tema filho com o original como pai e leve para lá apenas essas diferenças: o CSS para o seu ficheiro, os templates modificados para o respetivo caminho.
4. Ative o tema filho numa cópia e compare página a página com a loja atual.

A partir daí, já pode atualizar o pai com o procedimento anterior. É a forma de recuperar a possibilidade de manter o tema em dia, o que faz parte de manter em dia a loja inteira: um tema parado acaba por impedir a atualização do núcleo.

Erros habituais

• Ativar o filho e perder a configuração visual do tema (módulos ligados a hooks, posições). Ao mudar de tema, o PrestaShop pode aplicar a configuração que o novo tema declara; reveja as posições dos módulos depois de o ativar.
• Esquecer as imagens e os tipos de letra que o CSS do filho referencia com caminhos relativos ao pai.
• Editar o CSS combinado ou em cache em vez do ficheiro de origem. Perde-se assim que é regenerado.
• Personalizar a partir do back-office do fabricante e dos ficheiros ao mesmo tempo, sem saber qual prevalece.

Como resolver no PrestaShop

O RKR Editor CSS/JS de themes permite-lhe editar a partir do back-office o CSS e o JS do seu tema, incluindo temas filho, sem FTP: abre custom.css e custom.js com um clique (e cria-os se o seu tema não os tiver), pesquisa em todos os ficheiros do tema com indicação da linha, faz uma cópia antes de cada gravação para poder voltar atrás a partir de uma lista e recusa-se a gravar se alguém tiver alterado o ficheiro no disco desde que o abriu. Só trabalha com CSS, JS, SCSS e LESS dentro da pasta do tema, e a edição de templates .tpl vem desligada e reservada ao SuperAdmin. Se o que precisa é de criar o tema filho, separar personalizações feitas sobre o tema original ou atualizar o pai, com um pacote de horas de suporte da Rekire fazemo-lo numa cópia da sua loja.