Prestashop
1.7 / 8
Difficulté
2/4
Durée
10′
Définition et principe du thème enfant
Un thème enfant est un thème qui s’appuie sur un thème existant, appelé parent. Il permet de reprendre tout le design du site (images, templates html, css et js), afin de pouvoir apporter des modifications.
Avantage de créer un thème enfant
Il y a de nombreux avantages à créer un thème enfant dans Prestashop. Le plus courant est de pouvoir modifier des templates du thème pour les adapter à votre besoin spécifique, tout en conservant tout le design css/html du site parent. De plus en cas de mise à jour du thème parent vous n’écrasez pas vos modifications.
Prérequis nécessaires pour suivre facilement ce tutoriel :
- connaître la structure de fichiers et le fonctionnement de Prestashop
- être familier avec les thèmes de Prestashop
Nous utiliserons dans ce tuto le thème classic installé par défaut comme thème parent et themenfant comme nom de thème enfant à créer.
Les étapes
1 / Créer un dossier dans themes/
Dans le répertoire themes de Prestashop créez un dossier nommé themenfant, puis le sous dossier config.
├── themes
└── themenfant
└── config 2 / Copier les fichiers du parent
Copier les fichiers preview.png et config.yml du thème parent « classic » et les placer aux mêmes niveaux dans votre arborescence.
├── themes
└── themenfant
├── config
│ └── theme.yml
└── preview.png 3 / Modifier le fichier config.yml
Vous devez modifier le fichier de configuration config.yml qui va indiquer à Prestashop comment votre thème enfant est constitué. Dans notre exemple nous restons sur un thème enfant basic qui hérite de tout le thème parent.
Le fichier config.yml peut être édité avec n’importe quel éditeur de texte type notepad, TextEdit… mais pas pas avec Word !
- parent: nom du thème parent à l’identique (indique de quel thème on hérite)
- name: le nom « technique » de votre thème enfant. Évitez les accents, espaces et caractères spéciaux. Ce nom pourra être utilisé si vous modifiez des templates et ajoutez des textes qui devront être traduits.
- display_name: Le nom complet du thème qui va s’afficher dans le backoffice.
- version: la version de votre thème enfant
- author: (optionnel) pour ajouter une section auteur du thème.
- name: nom de l’auteur
- url: url du site de l’auteur
- assets: indique la section sur les contenus, c’est ici que l’on va indiqué l’héritage des contenus.
- use_parent_assets: true indique qu’on récupère l’ensemble du dossier assets du parent
parent: classic name: themenfant display_name: "Mon thème enfant de classic" version: 1.0.0 author: name: "Com'onSoft" url: "https://www.comonsoft.com" assets: use_parent_assets: true
Sauvegardez le fichier.
4 / Installer le thème enfant
Allez dans le backoffice de Prestashop dans PERSONNALISER / Apparence / Thème et logo :
Puis cliquez sur le bouton « Utiliser ce thème ».
Et voilà votre thème enfant est en place et activé. Bon rien ne change visuellement puisqu’on a hérité de tout le thème parent « Classic » 😉
Modifier surcharger (override) un template dans le thème enfant
Nous allons faire un exemple simple de modification de template. Pour modifier un template il faut impérativement respecter l’arborescence et le nommage exact des fichiers que l’on va modifier. Pour illustrer notre exemple nous allons modifier le template de connexion au compte client.
Pour obtenir
Le template à modifier « authentication.tpl » se trouve dans le thème parent « classic » et vous devez le copier au même niveau dans votre arborescence de thème enfant
├── themes
└── themenfant
├── config
└── templates
└── customer
└── authentication.tpl Le fichier authentication.tpl doit être modifié avec un éditeur de texte type notepad, TextEdit…
Ajoutez le code suivant (en gras)
{extends file='page.tpl'}
{block name='page_title'}
{l s='Log in to your account' d='Shop.Theme.Customeraccount'}
{/block}
{block name='page_content'}
{block name='login_form_container'}
<p class="no-account"><strong>{l s='Login with demo account:' d='Shop.Theme.Customeraccount'}</strong><br><br>demo@demo.fr<br>demodemo</p>
<section class="login-form">
{render file='customer/_partials/login-form.tpl' ui=$login_form}
</section>
<hr/>
{block name='display_after_login_form'}
{hook h='displayCustomerLoginFormAfter'}
{/block}
<div class="no-account">
<a href="{$urls.pages.register}" data-link-action="display-register-form">
{l s='No account? Create one here' d='Shop.Theme.Customeraccount'}
</a>
</div>
{/block}
{/block}
Et voil@, rechargez votre page en front et vous verrez le texte apparaître. Il ne reste plus qu’à le traduire, dans le backoffice de Prestashop.
Problèmes connus pendant la phase de développement du thème enfant
1 / Le thème refuse de s’installer sans message d’erreur
2 / Les changements du fichier config yml ne sont pas pris en compte
Lorsque vous développez votre thème enfant, si vous vous trompez dans le nom du thème parent, ou changez le nom du thème enfant ou tout autre information dans ce fichier de config, vous verrez que les modifications n’apparaissent pas à l’écran dans la liste des thèmes, ou pire votre thème refuse de s’installer. En effet Prestashop gère un fichier de cache pour chaque thème détecté.
Pas de panique il suffit de supprimer le fichier de cache « shop1.json » et de cliquer à nouveau sur PERSONNALISER / Apparence / Thème et logo pour que tout rentre dans l’ordre. Si vous vous êtes trompé dans le nom du thème enfant supprimer tout le dossier avec le mauvais nom.
├── config
├── themes
├── themenfant
└── shop1.json
Conclusion
Lorsque vous voulez modifier un thème existant nous vous recommandons fortement de faire un thème enfant pour éviter de perdre toutes vos modifications en cas de mise à jour du thème.
Si vous avez aimé ce tutoriel vous aimerez surement notre tutoriel sur : Liste des varaibles smarty de Perstashop 1.7 et 8
A la recherche de modules pour Prestashop
Vous avez besoin d’un module sur mesure ou d’un développement particulier ? N’attendez plus
A bientôt pour de nouveaux tutoriels avec Com’onsoft !