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, on crée une copie d’un thème existant. Contenant déjà la plupart les fichiers nécessaires, on peut lors les modifier sans toucher aux fichiers de base.

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.

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.

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, vous pouvez néanmoins 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. Dans le doute affichez-en le contenu et comparez-le à la source de la page qui vous intéresse. Cette technique peut-être un peu laborieuse mais c’est la plus efficace.

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âton, 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.

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.

Les éléments de code

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.

Les blocks

{block name='header'} 
<h1>{$title}</h1>
{/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 ‘header’ 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 ‘header’ 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=’header’ prepend} : Ajoute du contenu avant le contenu existant dans le block ‘header’
  • {block name=’header’ append} : Ajoute du contenu après le contenu existant dans le block ‘header’

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.

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 !


0 commentaires

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 : Au temps pour moi

Comic : Au temps pour moi

Nouvelle année, nouveaux challenges, projets, défis. Quand on est indépendant, il faut avancer, y aller à fond et ne pas regarder en arrière. À moins que…

Pin It on Pinterest