Table des matières - Sommaire
Préambule
Pour ce deuxième épisode, de la série consacrée au CMS PrestaShop, j’ai décidé de mettre en place un thème enfant. Avant toute modification du site mis en place lors de l’épisode 1, la première des choses à faire selon moi, est de mettre en place ce “child theme”.
Je parlerai de thème enfant tout au long de ce tutoriel pour utiliser ma chère langue maternelle, mais sachez qu’on parle aussi souvent de lui comme “child-theme”.
Mais avant même de vous parler de thème enfant, peut-être que certains d’entre vous se demandent ce qu’est un thème enfant, ou un thème tout court ?
Choix du support de tutoriel
Comme toujours sur Activateur Web, j’essaie de vous donner le meilleur et la possibilité de choisir, comment vous souhaitez suivre ce tutoriel. Vous pouvez donc visionner la vidéo suivante si vous le souhaitez, ou suivre l’article de blog ci-dessous qui vous détaillera ce tutoriel comme un guide à suivre pas à pas. À vous de choisir, mais vous pouvez aussi visionner la vidéo et lire l’article complet !
Tutoriel vidéo :
Tutoriel pas à pas
C’est quoi un thème dans PrestaShop ?
PrestaShop est une plateforme de commerce électronique open-source qui permet aux utilisateurs de créer des boutiques en ligne personnalisées. Un thème est un ensemble de fichiers qui détermine l’apparence visuelle de la boutique en ligne.
Vous pouvez voir l’ensemble de ces fichiers en vous rendant dans le dossier de votre boutique PrestaShop, ou vous trouverez un dossier nommé “thèmes”. À l’intérieur de ce dossier thèmes, se trouve un dossier nommé “classic”, qui est le thème par défaut de PrestaShop.
C’est quoi un thème enfant ?
Un thème enfant est un thème qui est créé à partir d’un thème parent existant. Il utilise tous les fichiers du thème parent, mais permet aux utilisateurs de personnaliser l’apparence de leur boutique sans modifier directement les fichiers du thème parent. Au lieu de cela, les modifications sont apportées dans les fichiers du thème enfant.
Pourquoi utiliser un thème enfant ?
Il est utile d’utiliser un thème enfant pour plusieurs raisons :
- Tout d’abord, cela permet aux utilisateurs de personnaliser leur boutique sans risquer de perdre ces modifications lorsqu’ils effectuent une mise à jour du thème parent. Les mises à jour du thème parent sont importantes, car elles peuvent corriger des bugs de sécurité et ajouter de nouvelles fonctionnalités, mais elles peuvent également écraser les modifications personnalisées que les utilisateurs ont apportées.
- De plus, l’utilisation d’un thème enfant peut faciliter le processus de développement pour les développeurs, car cela permet de séparer les modifications personnalisées du thème parent. Les développeurs peuvent ainsi apporter des modifications plus facilement et en toute sécurité, sans risquer de modifier le code du thème parent. Et je ne parle pas, ici, que des modifications de style et de mise en page, mais c’est aussi fait pour l’ajout de fonctionnalités, de boosts SEO, de balises méta, etc.
- Enfin, l’utilisation d’un thème enfant peut permettre aux utilisateurs de mieux comprendre le fonctionnement du thème parent, car ils peuvent voir comment les fichiers du thème parent sont utilisés et modifiés dans le thème enfant.
En résumé
En résumé, un thème enfant est un moyen utile et sûr de personnaliser l’apparence et les fonctionnalités d’une boutique en ligne PrestaShop sans risquer de perdre des modifications lors des mises à jour du thème parent.
Attention, toutefois, la documentation PrestaShop rappelle que le thème enfant servira pour des modifications mineures du thème parent. Si nous voulons changer toute la structure du thème parent, alors il serait peut-être plus judicieux de créer un nouveau thème complet.
Prérequis
Pour créer un thème enfant, cela nécessitera de recourir au minimum :
- Un éditeur de code : VSCode, SublimeText ou autres. Au besoin, n’hésitez pas à aller voir l’article de blog consacré à l’installation de l’éditeur de code gratuit, Visual Studio Code.
- Un logiciel de retouche ou création d’images. (Photoshop, Gimp, Illustrator, autres.)
Connaître son thème parent
Tous les tutoriels de cette série se font sur un serveur local, comme nous l’avons vu lors du premier épisode. En développant ainsi en local, nous assurons que toutes les modifications apportées seront testées avant leur mise en production.
Rappel important
Si votre boutique est déjà en ligne et en production, vous devrez alors faire les modifications depuis le dossier de votre boutique chez votre hébergeur, ou alors passer par un ftp comme FileZilla par exemple. J’ai d’ailleurs consacré un article sur la liaison entre un serveur local et un serveur distant avec FileZilla, en cas de besoins. Bien entendu, pensez à mettre votre boutique en mode maintenance pendant la modification de celle-ci. Soyez très prudent lors de modifications de vos dossiers et fichiers déjà en production.
Je ne peux que vous recommander, de développer une version de votre boutique sur un serveur local, de faire les modifications nécessaires, de les tester, et seulement ensuite de les mettre en production. Prenez soin d’installer la même version de PrestaShop que celle que vous utilisez en production.
Création du thème enfant
Plusieurs méthodes sont possibles afin de créer un thème enfant.
Afin d’être aussi complet que possible dans cet article, je vous explique les 2 méthodes.
Connaître son thème parent
La première chose à faire pour créer un thème enfant est de connaître le thème utilisé sur sa boutique PrestaShop. Pour cela, je me rends dans le dossier principal de PrestaShop, et ensuite dans le dossier “thèmes”.
Méthode n°1 : manuelle
Pour l’exemple, je vais créer le dossier du thème enfant sur mon bureau.
Nous pouvons créer ce dossier, n’importe où sur l’ordinateur. Le principal, comme toujours, est de se rappeler l’endroit où nous le créons.
Création du dossier ‘parent-child’
Pour commencer, on va créer un nouveau dossier qu’on nommera “parent-child”. Attention, ici “parent” désigne le nom de votre thème principal. C’est-à-dire que, par exemple, pour ma part, j’utilise le thème par défaut de PrestaShop qui s’appelle ‘classic’. Mon dossier devra donc être nommé “classic-child”.
À noter que vous pouvez également le nommer child-classic, classic_child ou child_classic, ou autrement. L’important est de reporter ce nom dans le fichier de configuration theme.yml, et surtout de bien indiquer le parent. Vous ne pouvez toutefois utiliser que les underscores ‘_’ ou les tirets ’-’ pour nommer ce dossier. Tous les autres caractères seront ignorés.
Création des dossiers config et assets
À l’intérieur de ce dossier “classic-child”, je vais créer 2 autres dossiers nommés respectivement “config” et “assets”.
Création du fichier theme.yml
Nous allons devoir maintenant ouvrir l’éditeur de code. Pour ma part, j’utilise VSCode. J’ouvre donc VSCode, et à l’intérieur de celui-ci, je vais ouvrir le dossier “config” que je viens de créer précédemment. Ensuite, avec VSCode, je créai un nouveau fichier que je nomme “theme.yml”.
Dans ce fichier, nous devons renseigner les lignes suivantes :
parent: classic
name: classic-child
display_name: Child theme of classic's theme by Activateur Web
version: 1.0.0
assets:
use_parent_assets: true
ATTENTION a respecté l’indentation dans ces lignes de code : cela a une importance capitale lorsqu’on écrit dans un fichier ayant l’extension .yml ou .yaml => l’indentation se fait via l’appui de la touche TAB de votre clavier.
Nous pouvons ensuite enregistrer ce fichier, et le fermer.
Laissez votre éditeur de code ouvert pour le moment.
Création du dossier CSS à l’intérieur du dossier “assets”
Je vous propose d’ouvrir dans l’éditeur de code, le dossier “classic-child”.
Ensuite, nous allons créer un nouveau dossier nommé “css” à l’intérieur du dossier “assets”
Création du fichier "custom.css" à l’intérieur du dossier “css”
A l’intérieur de ce nouveau dossier “css” , créons un nouveau fichier nommé “custom.css”.
Pour l’instant, ce fichier restera vide, mais c’est ici ensuite que nous viendrons modifier les styles de notre boutique.
Mais sachez que ce fichier est obligatoire, car un thème enfant doit toujours être installé avec un fichier custom.css vide.
Création d’une image d’illustration du thème enfant
Notre dossier de thème enfant est maintenant créé et prêt à être installé.
Il faut toutefois ajouter une image de prévisualisation du thème. Pour cela, vous pouvez utiliser le logiciel de votre choix.
L’image doit être nommée “preview.png” et être placée à la racine du dossier “classic-child”.
La taille idéale est de 500 pixels de largeur et 746 pixels de hauteur.
À vous de voir l’image que vous souhaitez mettre en avant pour représenter le thème enfant. Voici celle que j’ai créée rapidement. Sachez également que je vous donne accès à tous les fichiers et dossiers en fin d’article.
Compression du thème enfant en fichier zip
Afin de pouvoir installer notre thème enfant, nous devons au préalable le compresser en fichier zip. Nous sélectionnons donc tous les dossiers et fichiers présents dans le dossier classic-child, et on les compresse en fichier zip. Ce fichier, nous allons le nommer classic-child.zip.
Chargement du thème enfant
Maintenant, que notre thème est complet, et compressé au format zip, nous allons pouvoir l’installer sur la boutique.
Rendez-vous tout d’abord sur le tableau de bord de la boutique, puis on sélectionne l’onglet “Apparence”, et le sous-onglet “Thème et Logo”. Et enfin, on cliquera sur le bouton en haut à droite, “Ajouter un thème”.
Après avoir cliqué sur ce bouton, une nouvelle page s’ouvre. Plusieurs formulaires sont disponibles en fonction d’où se situe le thème à enregistrer.
Nous devons donc aller chercher le thème (importer) depuis l’ordinateur, et charger le dossier classic-child.zip. Nous enregistrons ensuite.
Le thème enfant est maintenant présent sur la boutique.
Si vous avez suivi cette méthode manuelle, vous pouvez poursuivre en vous rendant directement dans la section nommée Installation du thème enfant.
Méthode n°2 : automatique
Vous pouvez également créer un thème enfant de manière automatique grâce à PrestaShop et ces dernières versions.
La première chose à faire est de se rendre sur le tableau de bord de la boutique, puis sur l’onglet Apparence, et sous-onglet Thème et Logo, et d’enfin sélectionner l’onglet “Personnalisation avancée”.
Enregistrement du dossier.zip téléchargé
Après avoir cliqué sur le bouton “Télécharger le thème”, l’explorateur s’ouvre pour que nous puissions indiquer l’emplacement où enregistrer le dossier “child_classic.zip”.
Composition du dossier child_classic.zip
Nous pouvons ouvrir ce dossier “child_classic.zip” afin de voir ce qu’il contient. Et pour mieux voir encore, je vous propose de l’ouvrir dans l’éditeur de code.
Nous voyons les dossiers principaux :
- assets qui contient un dossier css, contenant lui-même un fichier custom.css
- config qui contient le fichier thème.yml
- Le fichier preview.png qui est l’image de prévisualisation du thème enfant.
- Dans chaque dossier, nous pouvons voir un fichier index.php qui est un fichier afin de sécuriser un peu les choses, et pour éviter les erreurs php pouvant se produire. Ce fichier doit être placé dans chacun des dossiers créés dans PrestaShop.
Modification de l'image preview.png
La seule chose que nous pouvons faire dans ce dossier child_classic.zip, est peut-être de modifier l’image de prévisualisation du thème enfant.
Sachez toutefois, que vous pouvez également laisser l’image par défaut.
L’image doit être nommée “preview.png” et être placée à la racine du dossier “child_classic”.
La taille idéale est de 500 pixels de largeur et 746 pixels de hauteur.
À vous de voir l’image que vous souhaitez mettre en avant pour représenter le thème enfant. Voici celle que j’ai créée rapidement. Sachez également que je vous donne accès à tous les fichiers et dossiers en fin d’article.
Importation du thème
Après avoir modifié ou non, le thème enfant depuis son dossier zip, il faut l’importer dans notre boutique. Nous devons donc maintenant cliquer sur le bouton “Importer thème enfant”, et importer le dossier child_classic.zip.
Une fois le thème enfant importé, une alerte de succès de l’importation apparaît.
Maintenant le thème est présent dans la liste des thèmes.
Installation du thème enfant
Maintenant, que le thème est enregistré dans notre boutique, nous devons le sélectionner depuis la liste des thèmes pour qu’il soit actif.
Après avoir confirmé l’utilisation du thème, nous pouvons voir que celui-ci est maintenant actif.
Vérification du fonctionnement du thème enfant
Affichage de la boutique (frontend)
La première chose que nous pouvons remarquer, est que malgré que ce soit le thème enfant qui soit actif, notre boutique s’affiche comme avant. Normal puisque notre thème enfant étend le thème parent.
Modification de custom.css
Ceux qui ont utilisé la méthode automatique, n’ont pas à modifier ce fichier, car il a été modifié automatiquement, pour afficher le header sur fond rouge.
Pour vérifier que notre thème enfant fonctionne correctement, nous pouvons ajouter du code à notre fichier custom.css. Bien entendu, nous devons maintenant modifier le fichier custom.css du thème classic-child qui se situe maintenant dans le dossier principal de notre boutique. Modifions donc le fichier et codons simplement ceci à l’intérieur :
#header {
background: red;
}
Après avoir enregistré ce code dans le fichier custom.css, retournons sur notre site et actualisons la page de notre boutique.
Test et validation de la modification du style (css) du theme enfant
Nous pouvons voir que le code que nous avons ajouté à notre fichier custom.css, s’applique parfaitement à la balise header de la boutique.
Cela démontre que notre thème enfant classic-child fonctionne parfaitement.
Bien entendu, laisser le header avec un fond rouge n’est pas forcément une bonne idée. Vous pouvez donc supprimer le code depuis le fichier custom.css du thème enfant, pour revenir à un affichage classique, ou mieux encore, créer de nouvelles règles css afin de personnaliser votre site.
Nous pourrons donc maintenant apporter toutes les modifications nécessaires à notre boutique sans toucher au code source du thème parent. Et en cas de mise à jour, nous ne perdrons rien de nos modifications apportées.
C’est parfait, n’est-ce pas ?
Conclusion
Nous venons de mettre en place un thème enfant sur notre boutique PrestaShop.
Je pense réellement que cela nous sera plus qu’utile pour la suite du développement de la boutique e-commerce.
Vous avez vu également que je fais tous ces changements depuis mon serveur local, et ce avant la mise en production. La mise en production se fera lorsque j’aurai effectué toutes les modifications, paramètres nécessaires à ma boutique.
Si votre boutique est déjà en ligne et en production, vous devrez alors faire les modifications depuis le dossier de votre boutique chez votre hébergeur, ou alors passer par un ftp comme FileZilla par exemple. J’ai d’ailleurs consacré un article sur la liaison entre un serveur local et un serveur distant avec FileZilla, en cas de besoins.
Bon début
Sachez enfin que la mise en place de ce thème enfant n’est qu’un début, et que désormais toutes les modifications se feront dans ce thème.
Nous le verrons dans les futurs tutoriels consacrés à cette série, mais c’est dans ce thème enfant que nous devrons modifier les templates, en recréant la structure exacte du thème parent et en étendant les fichiers de celui-ci.
C’est également là que nous modifierons les fichiers javascript au besoin. Cette fois, nous devrons créer un dossier “js” dans le dossier “assets”, puis un fichier custom.js, comme nous l’avons fait pour le css.
Suivez-moi !
Bref, vous le verrez si vous décidez de suivre cette série consacrée au CMS PrestaShop, il y a beaucoup de choses que nous pouvons faire pour développer cette application.
Vous pouvez également me suivre en vous inscrivant sur le site, pour être averti en avant-première des prochains articles de blog, en vous abonnant à ma page Facebook, Instagram, à ma chaîne YouTube, etc. N’hésitez pas à faire tout cela à la fois ! :)
Je vous donne rendez-vous très vite sur Activateur Web pour les prochains tutoriels.
Merci d’avoir suivi ce tutoriel. N’hésitez pas à laisser vos commentaires, ou à poser vos questions si besoin.
En attendant, prenez soin de vous, et surtout restez curieux !
