Prestashop : Création d'un thème enfant
Le but ici est de ne pas toucher au thème par défaut de Prestashop et de créer un thème enfant qui héritera de tout les templates et style du parent tout en modifiant uniquement ce que l'on souhaite.
Création du thème enfant
se connecter en FTP (via un gestionnaire de fichier ex : Filezilla) afin de se rendre dans votre site (voir avec votre hébergeur afin d'accéder à vos identifiants FTP).
Une fois connecté, se rendre dans le dossier themes.
Télécharger le thème parent en local (ici "classic").
Sur votre FTP, créer un dossier portant le nom de votre nouveau thème : prenons l'exemple de monPremierThemeEnfant.
Dans ce dossier monPremierThemeEnfant (themes/monPremierThemeEnfant) créer un dossier config.
Dans ce dossier config (themes/monPremierThemeEnfant/config) créer un fichier theme.yml)
Maintenant, il faut éditer ce fichier theme.yml
parent: classic # Nom du thème parent
name: monPremierThemeEnfant # Le nom de votre theme enfant
display_name: Mon premier theme enfant # sera affiché sur l'administration de votre boutique
version: 1.0.0
author:
name: "John Doe" # Vous pouvez y mettre votre nom
email: "pub@prestashop.com"
url: "https://www.prestashop-project.org"
Une fois ça fait, vous pouvez vous rendre dans l'administration de votre boutique, cliquez sur "Apparence -> Thème et logo et voir apparaitre votre nouveau thème.
Vous pouvez maintenant réaliser les modifications du thème en créant les fichiers en conservant la même arborescence que le dossier parent.
Modification de templates/index.tpl, il suffit de créer le dossier templates et d'y créer le fichier index.tpl en copiant le parent si l'on souhaite modifier que quelque ligne par exemple ou le refaire de 0 selon vos besoins.
Allez plus loin dans la configuration du thème enfant :
Depuis la version 8 de Prestashop, on a la possibilité d'ajouter :
assets:
use_parent_assets: true
Lorsqu'il est défini sur true, certaines variables supplémentaires sont modifiées pour Smartyles modèles.
- theme_assetsest remplacé par l'URI des actifs du thème parent,
- img_url, css_url, js_urlsont remplacés par les URI correspondants du thème parent,
quelques autres variables sont disponibles :
- child_theme_assetsqui est l'URI des actifs du thème enfant,
- child_img_url, child_css_url, child_js_urlqui sont les URI correspondants du thème enfant.
Lorsqu'il est défini sur false, seuls theme_assets, img_urlet sont disponibles et constituent les URI correspondants du thème enfant css_url.js_url
Pour maintenir le comportement de la version 1.7 de Prestashop et charger les ressources du thème enfant, "use_parent_assets" doit être défini sur false.
Vous avez la possibilité de configuré plusieurs choses directement dans ce fichier theme.yml dont voici une liste :
- Vous pouvez activer, désactiver ou réinitialiser les modules lorsque le thème est activé.
- Vous pouvez également demander au thème de créer des hooks et d'attacher des modules à des hooks personnalisés et existants lorsque le thème est activé
- Paramétrer les images
Voir tout ce qui est possible de faire sur la documentation officielle : https://devdocs.prestashop-project.org/8/themes/getting-started/theme-yml/