Thème enfant PrestaShop : personnaliser le design sans perdre vos modifications à la mise à jour

C'est l'histoire de nombreuses boutiques : quelqu'un a changé la couleur des boutons, déplacé un bloc de la fiche produit et retouché le template du panier, le tout directement dans les fichiers du thème. Cela a fonctionné pendant des années. Jusqu'à ce qu'une nouvelle version du thème sorte avec des corrections importantes, qu'on la mette à jour, et que toutes ces modifications disparaissent. Ou pire : personne n'a osé mettre à jour et le thème est resté bloqué sur une version qui ne correspond plus au cœur.

Le thème enfant existe précisément pour éviter cela.

Ce qu'est un thème enfant

C'est un thème qui déclare un autre thème comme parent et qui ne contient que les fichiers que vous voulez modifier. Quand PrestaShop a besoin d'un template, il le cherche d'abord dans le thème enfant ; s'il ne le trouve pas, il utilise celui du parent. Résultat : l'enfant ne contient que vos personnalisations, séparées du code de l'éditeur du thème.

Depuis PrestaShop 1.7, le mécanisme fait partie du cœur et se déclare dans le fichier de configuration du thème, config/theme.yml, en indiquant le nom du thème parent. Les thèmes par défaut (Classic et, dans PrestaShop 9, Hummingbird) peuvent servir de parent, tout comme la plupart des thèmes commerciaux, même s'il vaut mieux le confirmer auprès de leur auteur.

Ce qui va dans le thème enfant

Vos propres feuilles de style et scripts

Votre CSS et votre JavaScript vont dans des fichiers propres au thème enfant. Vous pouvez choisir si l'enfant charge aussi les fichiers du parent (le cas habituel, pour hériter de tout le design et simplement ajouter par-dessus) ou s'il les remplace. Écrire vos styles dans un fichier à part, chargé après ceux du parent, est la façon la plus propre de modifier couleurs, marges ou polices sans toucher à quoi que ce soit de l'éditeur.

Les templates que vous modifiez vraiment

Si vous devez modifier la structure d'une page, vous copiez dans l'enfant uniquement ce template, au même chemin relatif que dans le parent, et vous le modifiez là. Par exemple la fiche produit ou un bloc précis du panier. Tous les autres continuent de venir du parent.

Mieux encore : de nombreux templates de PrestaShop sont organisés en blocs Smarty. Un template de l'enfant peut étendre celui du parent et ne redéfinir qu'un seul bloc, au lieu de le copier entièrement. Ainsi, si l'éditeur corrige quelque chose ailleurs dans ce template, la correction vous parvient.

Templates des modules

Les modules bien conçus permettent au thème de surcharger leurs templates. Ceux-ci se placent dans le dossier modules/ du thème, sous le nom du module et avec le même chemin que le template a dans le module. Cela fonctionne de la même façon dans un thème enfant : vous personnalisez l'apparence d'un module sans toucher au module, et lorsque le module est mis à jour, votre template reste en place.

Ce qui ne va pas dans le thème enfant

• Les changements de logique. Le thème, c'est la présentation. Si vous avez besoin que quelque chose fonctionne autrement, c'est un module, pas un template rempli de conditions compliquées.
• Les overrides de classes du cœur. Ils se trouvent dans un autre dossier et ont leurs propres risques lors des mises à jour. Qu'une modification soit dans le thème enfant ne la protège pas si elle dépend en réalité d'un override.
• Les copies complètes du thème parent. Si vous copiez tous les templates dans l'enfant « au cas où », le parent ne sert plus à rien : aucune correction ne vous parvient et vous revenez au problème de départ.

Comment mettre à jour le thème parent

Avec un thème enfant, mettre à jour le parent est une procédure prévisible :

1. Sur une copie de la boutique, remplacez le thème parent par la nouvelle version.
2. Dressez la liste des templates de l'enfant et, pour chacun, comparez l'ancienne version du parent avec la nouvelle. Si l'éditeur a modifié ce template, vous devez reporter ses changements dans votre copie de l'enfant ou vérifier que votre bloc redéfini s'intègre toujours.
3. Vérifiez votre CSS : si le parent a changé des noms de classes ou la structure HTML, certains de vos styles ne s'appliqueront plus.
4. Videz le cache des templates et des fichiers combinés, et parcourez les pages principales : accueil, catégorie, fiche produit, panier, checkout et compte client.
5. Testez une commande complète. Les templates du checkout sont ceux qui changent le plus et qui font le plus de dégâts quand ils échouent.

Si vous gérez les versions de votre thème enfant (même en enregistrant simplement une copie datée avant chaque modification), ce processus est beaucoup plus rapide : vous savez ce que vous avez modifié et quand.

Si vous avez déjà modifié le thème directement

C'est le cas le plus fréquent, et il y a une solution :

1. Procurez-vous le paquet original de la même version du thème que celle qui est installée.
2. Comparez fichier par fichier votre thème avec l'original. Les différences sont vos personnalisations (et, parfois, des choses que personne ne se souvient avoir faites).
3. Créez un thème enfant avec l'original comme parent et n'y reportez que ces différences : le CSS dans son fichier, les templates modifiés à leur chemin.
4. Activez le thème enfant sur une copie et comparez page par page avec la boutique actuelle.

À partir de là, vous pouvez mettre à jour le parent avec la procédure ci-dessus. C'est la façon de retrouver la possibilité de maintenir le thème à jour, ce qui fait partie de la mise à jour de toute la boutique : un thème bloqué finit par empêcher la mise à jour du cœur.

Erreurs fréquentes

• Activer l'enfant et perdre la configuration visuelle du thème (modules greffés sur des hooks, positions). Au changement de thème, PrestaShop peut appliquer la configuration déclarée par le nouveau thème ; vérifiez les positions des modules après l'activation.
• Oublier les images et les polices que le CSS de l'enfant référence avec des chemins relatifs au parent.
• Modifier le CSS combiné ou en cache au lieu du fichier source. La modification est perdue dès qu'il est régénéré.
• Personnaliser à la fois depuis le panneau de l'éditeur du thème dans le back-office et depuis les fichiers, sans savoir lequel l'emporte.

Comment le résoudre dans PrestaShop

RKR Editor CSS/JS de themes vous permet de modifier depuis le back-office le CSS et le JS de votre thème, thèmes enfants compris, sans FTP : il ouvre custom.css et custom.js en un clic (et les crée si votre thème ne les a pas), recherche dans tous les fichiers du thème en indiquant la ligne, fait une copie avant chaque enregistrement pour revenir en arrière depuis une liste déroulante et refuse d'enregistrer si quelqu'un a modifié le fichier sur le disque depuis que vous l'avez ouvert. Il ne travaille qu'avec le CSS, le JS, le SCSS et le LESS du dossier du thème, et la modification des templates .tpl est désactivée par défaut et réservée au SuperAdmin. Si vous avez besoin de créer le thème enfant, de séparer les personnalisations faites sur le thème original ou de mettre à jour le parent, nous le faisons sur une copie de votre boutique avec un forfait d'heures de support Rekire.