Comment personnaliser votre thème dans Prestashop 1.7 ?

Comment personnaliser votre thème dans Prestashop 1.7 ?


Le plus simple avec Prestashop est en général de récupérer un thème existant et d’en modifier les réglages pour obtenir le résultat désiré. Sauf que cette technique a vite ses limites. Comment faire pour afficher du contenu personnalisé, modifier la structure de vos pages, bref, sortir du lot en modifiant vous-même le contenu et le look de votre thème Prestashop ?

Prestashop est une application plutôt complexe avec des centaines de classes. Il est en général hautement déconseillé d’aller toucher les fichiers de bases de Prestashop.

Au lieu de ça, si on décide de modifier les vues d’un thème il est possible de modifier le fichier custom.css, livré par défaut avec tous les thèmes. Cette technique héritée de Prestashop 1.6 ne permet cependant pas de faire tout ce qu’on veut, le CSS c’est puissant, mais on ne peut pas ajouter de contenu, modifier les textes, etc.

Dans ce cas, la bonne pratique veut que l’on créé un thème enfant. Cette nouvelle option permet, comme pour WordPress, de créer un thème qui héritera d’un thème installé.

On utilisera donc par défaut l’ensemble des vues, styles et personnalisations du thème parent et il sera possible de modifier n’importe lequel de ces éléments sans toucher aux fichiers originaux. Cette nouvelle solution a fait son apparition avec Prestashop 1.7 et c’est un excellent ajout.

Le but est d’éviter qu’une fonctionnalité de Prestashop ne marche plus ou qu’une mise à jour du système remplace le contenu modifié. Il est même possible que la mise à jour ne soit plus possible après ce genre de modifications. Eh oui, Prestashop est un animal assez délicat.

La partie la plus importante d’un thème est en général les vues, utilisées pour afficher le contenu à l’utilisateur. Il est bien sûr également possible de créer des modules, d’étendre des fonctionnalités, en créer de nouvelles, modifier des classes, etc.

Mais en règle générale, le gros des modifications d’un thème se fera dans les modèles TPL utilisés par Prestashop, qui s’occuperont d’afficher le contenu au visiteur.

La liste complète et détaillée des modèles de Prestashop !

Une super ressource à télécharger

La liste complète et détaillée des modèles de Prestashop !

Un thème Prestashop contient plus de 100 fichiers de modèles, difficile de s'y retrouver ! Pour vous aider j'ai créé la ressource ultime : la liste descriptive complète des modèles d'un thème.

Modèle MVC

Avant de parler plus précisément du fonctionnement des fichiers TPL, il est important de comprendre le concept de développement qui est à la base de Prestashop : le modèle MVC. Pour modèle, vue et contrôleur.

Ce modèle est largement utilisé en développement orienté objet. Il en existe des dizaines de variations en fonction des langages, avec leurs subtilités, mais l’idée de base est la suivante : séparé clairement chaque élément de l’application.

Schéma du modèle MVC
Schéma du modèle MVC

Modèle

Le modèle est en fait l’élément de base. Dans Prestashop, un client est un modèle. Ce modèle contient différents attributs (nom, prénom, e-mail, etc.) et est lié à d’autres modèles Prestashop, par exemple un client peut avoir plusieurs adresses.

En général, ce n’est pas une obligation, mais un modèle provient directement de la base de données. Il s’agit d’une classe représentant un enregistrement de la table. On en reprend donc les colonnes sous forme d’attributs.

Vue

La vue est ce dont nous allons parler dans cet article. Elle s’occupe d’afficher le résultat à l’utilisateur.

Pour se faire elle utilisera du contenu fixe (ici du HTML) et du contenu dynamique (du PHP interprété). Par exemple elle permettra d’afficher la liste des clients dans le back office de Prestashop.

Cette liste de clients sera en fait une liste de modèles, de type client, qui seront transmis à la vue au travers du contrôleur.

On distingue 3 types de vues :

  1. Layout : qui contiendront ensuite les vues. Ces layouts sont des pages de bases utilisées pour le rendu.
  2. Vues : les vues sont incluses dans les layouts et correspondent généralement aux actions des contrôleurs
  3. Partials : vous verrez souvent des dossiers _partials dans la structure des dossiers des vues de Prestashop. Il s’agit de vues incluses spécifiquement et qui peuvent souvent être utilisées à plusieurs endroits.

Contrôleur

Le contrôleur s’occupe d’effectuer le lien entre la vue et le modèle. Par exemple lorsque vous tapez l’adresse : monshop.com/panier vous accéder à la page du panier.

En fait vous accédez avant tout au contrôleur panier. Ce contrôleur peut avoir plusieurs actions (par exemple, nouveau, modifier, supprimer, qui sont les actions de base). Mais son action par défaut permet d’afficher le contenu du panier.

Donc le contrôleur aura une action nommée par exemple index, qui sera utilisée par défaut. Lorsque l’on accède à l’index le système va récupérer tous les modèles de produits du panier de l’utilisateur.

Il va ensuite les affecter à une variable $produits par exemple et passer cette variable à la vue. La vue par défaut pourra alors être vues/panier/index.tpl. Dans cette vue la variable $produits sera lue et tous les produits seront affichés à l’utilisateur.

Fichiers tpl

Liste de fichiers TPL

Les fichiers TPL représentent donc les vues de l’application. C’est à dire les fichiers affichant du contenu au visiteur. Comme un fichier PHP ces fichiers ont la particularité de pouvoir contenir du code dynamique que le serveur interprétera au moment de les afficher au visiteur.

Un TPL contient une part de HTML et une part de code Smarty. Donc, sur la base d’un TPL, Prestashop va créer un fichier HTML en remplaçant le code Smarty (variables, boucles, expressions conditionnelles) par le contenu interprété du code donné.

C’est donc par exemple un fichier TPL qui affiche la liste de vos produits au sein d’une boucle et un modèle spécifique affichant chacun de vos produits : miniature, nom du produit, etc.

Chaque partie de Prestashop utilise des fichiers TPL : les fonctions de bases, les modules, la gestion du back office, etc.

Smarty

Smarty - Le moteur de modèles utilisé par Prestashop
Smarty – Le moteur de modèles utilisé par Prestashop

Prestashop est développé en PHP et Smarty est ce qu’on appelle un moteur de modèle pour le langage PHP. C’est à dire qu’il offre des moyens d’afficher du contenu PHP (variables, boucles, expressions conditionnelles) dans du HTML sans pour autant avoir à saisir du PHP.

Il limite l’utilisation des fonctions PHP, à des fins de sécurité, en ne proposant qu’un panel d’actions limitées, mais en même temps en simplifie la structure et permet d’ajouter facilement du contenu dans du HTML.

Là où afficher le contenu d’une variable PHP dans du HTML ressemblerait à ça :

<?php echo($variable); ?>

Voilà ce que ça donne avec Smarty :

{$variable}

Le code Smarty est toujours évalué entre deux accolades. Pour plus d’infos et trouver tout ce dont vous avez besoin pour commencer avec Smarty, jetez un œil à la documentation ou lisez cet article où je donne plus de détail sur le code Smarty ainsi que des astuces pour aller plus loin dans la modification des thèmes.

Structure des fichiers

Structure des fichiers TPL dans Prestashop

Fichiers de bases

Dans Prestashop il n’y a pas de référence, du moins pour la version 1.7, vous permettant de savoir exactement quel modèle correspond à quelle vue dans le système. Pour une raison toute simple : le thème utilisé pourra dicter la liste des modèles TPL présents.

Bien sûr la plupart des thèmes partagent une structure et des vues de base similaires, mais il existe toujours quelques différences et vues supplémentaires.

Si vous désirez savoir quel modèle gère l’affichage actuel, consultez mon article sur l’ensemble des modèles d’un thème, où je détaille et décrit chaque fichier d’un thème et sa fonction. Vous pouvez aussi afficher la source d’une page. Parfois vous aurez des informations sur le nom du fichier TPL utilisé, en commentaire dans la source.

Dans d’autres cas, il sera nécessaire de fouiller un peu. Pour toutes les fonctionnalités de base, le dossier est le suivant :

/themes/[votre thème]/templates

Là vous trouverez une structure qui vous permettra de localiser assez facilement les fichiers utilisés.

Modules / add-ons

Les fichiers TPL présents dans le dossier :

/themes/[votre thème]/templates

Ne concerne que les vues des fonctions de base de Prestashop. Si vous désirez modifier les vues d’un module spécifique (module que vous avez téléchargé ou un module fourni par défaut avec Prestashop), jetez un œil dans le dossier :

/themes/[votre thème]/modules

Là vous trouverez la liste des dossiers contenant des informations liées à chaque module. Cependant il se peut qu’un module n’y apparaisse pas.

Tous les modules ne sont pas ajoutés au thème par défaut. En fait ce dossier vous permet d’ajouter des vues et fonctionnalités qui remplaceront celles par défaut des modules installés.

Donc par défaut, un module est installé de manière globale dans le dossier :

/modules

Là vous trouverez tous les modules installés (et il y en a un paquet, même par défaut). Naviguez ensuite dans les dossiers du module pour trouver le fichier TPL que vous cherchez à modifier.

Il faut à nouveau y aller à tâtons, entre les commentaires dans la source, la ressemblance du code avec ce qui est affiché à l’écran, etc.

Une fois le fichier trouvé, vous pouvez en modifier l’affichage sans risque de corrompre votre module en créant les mêmes dossiers et fichiers dans :

/themes/[votre thème]/modules

Petit exemple, si vous décidez de modifier l’affichage des moyens de paiements bancaires dans votre shop. Le module de paiement bancaire se nomme ps_wirepayment. Le fichier que vous aimeriez changer se trouve dans :

/modules/ps_wirepayment/views/templates/hook/payment.tpl

Ce fichier gère l’affichage du module de paiement au moment de la commande. Si vous désirez en modifier le contenu, créez la même structure de données dans votre thème et copiez-y ce fichier payment.tpl :

/themes/[votre thème]/modules/ps_wirepayment/views/templates/hook/payment.tpl

Là vous pourrez modifier ce modèle sans risque de toucher aux fichiers originaux.

Créer un thème enfant

Psst! Si vous cherchez à économiser du temps, utilisez mon générateur de thème enfant pour Prestashop 1.7. Il vous suffit de renseigner le nom de votre thème parent et 2 secondes plus tard, vous thème est généré dans un fichier zip et vous n’avez plus qu’à l’installer. Toutes les infos sont ici !

Maintenant que nous avons couvert la théorie, attaquons la pratique. Créer un thème enfant manuellement n’est vraiment pas très compliqué. Il suffit de se rendre dans les dossiers de vos thèmes dans l’installation de Prestashop :

/themes

Et là, vous pouvez créer un sous-dossier. Par exemple, appelons ce nouveau thème theme-enfant. À l’intérieur, créez un dossier config et à l’intérieur un fichier, nécessaire pour tout thème enfant, appelé theme.yml. Voici la structure de votre thème enfant :

/themes/theme-enfant/config/theme.yml

Ce fichier se composera des informations importantes de votre thème enfant. Voici un exemple de fichier theme.yml :

parent: classic # Nom du thème parent
name: theme-enfant # Identifiant de votre thème enfant, identique au dossier
display-name: Mon super thème # Description du thème
version: 1.0.0 # Version en cas de mise à jour
assets:
  use_parent_assets: true 

Où :

  • parent est le nom du thème parent
  • name est l’identifiant du thème enfant, en général identique au dossier du thème
  • display-name décrit le thème, texte affiché dans le front end
  • version permet de spécifier une version et de gérer les mises à jour du thème
  • use_parent_assets indique si votre nouveau thème doit également hériter des fichiers CSS, javascripts et des images du thème parent ou non

Voilà l’essentiel de ce dont vous aurez besoin pour créer un thème enfant. Mais vous pourrez encore créer un fichier preview.png à la racine de votre thème, qui permettra d’afficher une image d’aperçu de votre thème. Si vous ne la spécifiez pas, l’image du thème parent sera reprise.

Ensuite j’aime en général créer la structure des dossiers pour les assets à savoir :

/themes/assets/css
/themes/assets/js
/themes/assets/img

Et à l’intérieur du dossier /themes/assets/css créer un fichier custom.css qui sera le fichier CSS utilisé pour votre nouveau thème enfant.

Votre thème enfant est prêt !

Modifier un modèle

Une vue n’est en générale pas très compliquée à modifier. Bien sûr il existe des éléments de code qui peuvent décontenancer un néophyte. Mais elles sont en général assez limitées dans les vues de base de Prestashop.

Le processus

Lorsqu’on veut modifier un modèle dans un thème enfant, il faut toujours commencer par trouver le fichier qui nous intéresse dans le thème parent.

Imaginons que nous souhaitons modifier le modèle qui affiche la page d’un produit. Ce modèle s’appelle product.tpl et se trouve par défaut dans ce dossier dans le thème classic :

/themes/classic/catalog/product.tpl

Si vous souhaitez reprendre ce fichier pour le modifier, vous pouvez recréer cette structure dans votre thème enfant :

/themes/theme-enfant/catalog/product.tpl

Si vous vous contentez de créer ce fichier sans lui donner de contenu, vous pourrez remarquer en allant sur la page d’un produit que celle-ci est désormais vide. Votre fichier product.tpl a surchargé le fichier existant et remplacé son contenu.

Bien sûr, vous pourriez copier le modèle product.tpl existant et le modifier intégralement si vous avez besoin de le changer intégralement. Mais en général, on se contente de modifier certains éléments.

Si, par exemple, vous aimeriez remplacer le bloc affichant le prix dans ce modèle sans pour autant reprendre l’intégralité du fichier, héritez de votre fichier original.

Hériter d’un modèle

Pour hériter d’un fichier du thème parent, vous devez préfixer votre modèle avec :

{extends file='parent:[chemin vers le fichier]'}

Ce code vous permet de demander à Prestashop d’hériter d’un fichier du thème parent, par la méthode extends, spécifiant un paramètre parent avant le chemin du fichier.

Dans notre cas, pour hériter du fichier product.tpl, il faudrait entrer :

{extends file='parent:catalog/product.tpl'}

Et vous pourrez voir en actualisant la page que désormais celle-ci est identique au fichier product.tpl du thème classic, vous en avez hérité !

Si on en modifiait le contenu ?

Les blocks

Si vous vous rendez dans le fichier product.tpl, vous pourrez-voir qu’à de nombreux endroit apparaissent des balisent block. Par exemple, pour afficher le prix, un block appelé product-price a été créé, voici à quoi il ressemble :

{block name='product_prices'}
    {include file='catalog/_partials/product-prices.tpl'}
{/block}

Il inclut en fait le contenu d’un partials présent dans un sous-dossier, mais il aurait aussi bien pu ressembler à ça :

{block name='product_prices'}
   Prix : {$product.price}
 {/block}

Il est important de bien comprendre le concept d’un block. En fait un block est une indication donnée par Smarty pour signaler que son contenu doit apparaître dans le block avec le nom donné.

Le code ci-dessus peut fonctionner de deux manières :

  1. Soit il n’existe encore pas de block avec le nom ‘product_prices’ dans la vue actuelle ou une des vues parentes. Par exemple un layout, contenant une vue, qui contient un partial. Si on appel ce code depuis le partial, Smarty va regarder si le layout ou la vue parente contiennent ce block. Si ce n’est pas le cas, le contenu sera ajouté à l’endroit où vous l’aurez saisi dans le partial et un nouveau block ‘product_prices’ sera créé pour une éventuelle utilisation future.
  2. Soit le block existe déjà ailleurs dans une vue parente ou dans la vue actuelle. Du coup, Smarty va retrouver ce block et en remplacer le contenu avec le contenu donné.

C’est ce qui rend les blocks si pratiques : à partir d’une vue enfant, vous pouvez remplacer du contenu n’importe où dans une autre vue parente.

Mieux, il est également possible d’ajouter du contenu au début ou à la fin d’un block existant, sans en remplacer le contenu. Pour se faire :

  • {block name=’product_prices’ prepend} : Ajoute du contenu avant le contenu existant dans le block ‘product_prices’
  • {block name=’product_prices’ append} : Ajoute du contenu après le contenu existant dans le block ‘product_prices’

De cette manière, voici le type de code que nous pourrions retrouver dans le contenu de notre fichier product.tpl de notre thème enfant :

{extends file='parent:catalog/product.tpl'}

{block name='product_prices'}
   Contactez-nous pour obtenir les prix
 {/block}

Ce qui ferait passer notre modèle original de ça :

Modèles product.tpl dans sa version originale

À ça :

Modèles product.tpl dans sa version modifiée

Et tout ça en quelques lignes de code.

Traductions

Le code présenté plus haut est bien pratique, mais il ne correspond pas aux conventions de Prestashop. Toute chaîne de caractère dans le système doit être traduisible.

Pour se faire, nous allons créer un nouveau domaine de traduction spécifique à notre thème enfant. Et pour se faire, il suffit de créer une chaîne de caractère avec ce domaine dans notre modèle et Prestashop créera la chaîne traduisible et le domaine automatiquement :

{extends file='parent:catalog/product.tpl'}

{block name='product_prices'}
   {l s='Contact us to get a quote' d='Shop.ThemeEnfant'}
 {/block}

La bonne pratique veut que la chaîne de caractère soit toujours en anglais par défaut. Sans traduction dans le back office, cette méthode affichera simplement le texte Contact us to get a quote. Vous avez vu que nous avons spécifié le domaine Shop (domaine de base pour le front end) et le sous-domaine ThemeEnfant, spécifique à notre thème

Si vous vous rendez dans les traductions de Prestashop, vous pourrez retrouver cette chaîne de caractère dans les traductions du thème enfant et la modifier :

Traductions de votre thème enfant dans le back office

Et une fois le réglage enregistré, vous pourrez-voir la traduction se mettre à jour sur la page de votre thème :

Version traduction de product.tpl de votre thème enfant

Les éléments de code

Brièvement, voici quelques-uns des éléments de codes proposés par Smarty, découvrez plus de détail sur le code Smarty dans mon article sur le sujet.

Vous pourrez y trouver des variables :

{$variable}

Des boucles :

{foreach from=$element.children item=child}
{/foreach}

Des opérateurs conditionnels :

{if $element.children.count == 0}
{/if}

Si vous ne connaissez pas le code, évitez de toucher aux lignes de code Smarty, contentez-vous de jouer avec la structure HTML du fichier TPL, ça suffira dans la majorité des cas.

Conclusion

Prestashop est un outil très puissant et intégralement modulable selon vos besoins. Comme mentionné plus haut, il est possible d’étendre des fonctionnalités, de modifier des classes, etc.

Mais la plupart des modifications de bases peuvent déjà très bien s’effectuer par la modification des vues dans le système. Leur structure n’est pas très compliquée à assimiler et leur fonctionnement non plus.

Smarty n’est clairement pas le moteur de modèle le mieux documenté ou le plus puissant sur le marché, mais si on cherche un peu on trouve tout ce dont on a besoin. Et l’introduction des thèmes enfants avec la version 1.7 rend la personnalisation facile et rapide, avec un système d’héritage et de blocks plutôt puissant !

Apprendre ce genre de techniques à un gros avantages : vous ne vous reposerez plus exclusivement sur des thèmes payants pour obtenir des résultats. Vous pourrez directement modifier la structure et le contenu de vos vues et créer votre propre thème de A à Z !



7 commentaires

7 Commentaires

  1. moi

    on ne vois pas les images

    Réponse
    • Thierry

      Bonjour !

      Tiens, vous ne voyez aucune des images de l’article ?

      Pourtant aucun problème chez moi, j’ai testé sur plusieurs navigateurs et ça fonctionne. Essayez de rafraîchir la page avec F5 ou de forcer le rafraîchissement du cache avec Maj + F5.

      J’espère que ça réglera le problème!

      Réponse
  2. lucas

    Bonjour! Merci pour ce tuto, génial !
    Comment est-il possible d’accéder au autres fichiers tpl tels que header ou bien footer.tpl, en fait, je cherche à modifier le html du header dans sa version theme/classic de p1.7
    merci beaucoup !

    Réponse
    • Thierry

      Bonjour Lucas,

      Merci du retour ! Est-ce que vous avez déjà créé un thème enfant ? Si vous souhaitez modifier les fichiers header ou footer, qui se trouvent dans le dossier classic/templates/_partials il vous suffit d’aller dans votre thème enfant, de créer les dossiers templates/_partials et à l’intérieur de ce dossier d’y copier votre fichier header.tpl et footer.tpl du thème classic (afin d’avoir une base, vous pouvez aussi bien les recréer de zéro, mais c’est vite plus compliqué).

      Une fois ces fichiers créés, vous verrez qu’en les modifiant ces modifications s’appliqueront à votre boutique. Si vous souhaitez disposer de la liste complète des modèles du thème classic, allez consulter mon article sur le sujet.

      J’espère que c’est clair, bon courage pour la suite de votre projet !

      Réponse
  3. Albert Ozouaki

    Bonjour, je vous remercie pour cet article. Néanmoins, j’ai un petit soucis, venant de débuter sur Prestashop, je souhaite rajouter un simple bouton sur la page d’accueil et je trouve pas quel est le fichier .tpl et block précis pour ce faire.

    Réponse
    • Thierry

      Bonjour Albert,

      Merci du commentaire. Pour modifier l’accueil, il vous faut reprendre dans votre thème enfant, le fichier index.tpl qui se trouve dans dans classic/templates/index.tpl.

      Cependant le souci avec ce fichier est qu’il se contente en gros d’exécuter le hook appelé displayHome.

      Donc si vous voulez ajouter du contenu personnalisé vous pouvez le faire soit avant le hook, soit après, mais pas entre deux modules greffés sur ce hook. Une solution alternative est d’ajouter le module Custom text (installé par défaut sur l’accueil du thème classic) et de le personnaliser pour y ajouter votre bouton.

      J’espère que ça vous aider ! Bon courage pour la suite.

      Réponse
      • Albert Ozouaki

        Merci beaucoup pour votre aide. J’ai réussi à implémenter mon bouton.

        Bon courage à vous aussi dans vos projets !

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

derniers articles
de mon blog

Comic : Un truc vite fait

Comic : Un truc vite fait

Quand on travail dans un métier créatif, les gens pensent qu’un dessin, logo, flyer ou autre se fait en quelques minutes… Un petit truc vite fait quoi !