Concevoir et réaliser l’aspect visuel d’un site Prestashop, et développer les fonctionnalités spécifiques dont il aura besoin nécessitent des spécialistes de deux domaines bien différents. Les graphistes en charge de l’interface du site ne savent pas nécessairement développer et les développeurs ne sont pas toujours de bons graphistes. Il faut donc pouvoir séparer les deux tâches, affichage et fonctionnalités, afin de mieux les réunir par la suite pour obtenir un site Prestashop pleinement opérationnel. Le moteur de templates Smarty est là pour remplir ce rôle et permettre aux différents métiers de collaborer à la construction du site Prestashop.
Qu’est-ce que Smarty ?
Smarty est un moteur de templates pour le langage PHP.
Pour faire simple, il s’agit d’un outil facilitant la gestion de l’affichage d’un site ou d’une application écrite en PHP.
Afficher le contenu du site grâce à PHP
Il y a deux façons de gérer l’affichage d’un site dynamique avec PHP.
La première solution consiste à intégrer directement des variables PHP (contenant des informations provenant de la base de données par exemple, comme le nom d’un produit, son prix ou le total calculé d’un panier) dans le code HTML de la page afin d’insérer les données que l’on souhaite afficher. Cela a l’avantage d’être très simple et rapide à faire. Une fois la structure HTML en place et le code CSS rédigé afin de définir la mise en forme, il suffit d’ajouter un peu de code PHP pour que les données soient insérées lors de la construction de la page.
En revanche, il faut connaître au moins un minimum le langage PHP, et le mélange du code HTML et PHP rend la maintenance et l’évolution du site plus difficile.
Utiliser un moteur de templates
La seconde solution est d’utiliser un moteur de templates pour gérer l’affichage des pages. Il va permettre de séparer la présentation (l’affichage résultant de l’interprétation du HTML et du CSS) de la logique applicative. Cela signifie que la gestion de l’affichage est séparé de la récupération et de la préparation des données pour l’affichage. Il n’est pas utile de maîtriser PHP. Smarty utilise un langage permettant de définir des variables qui auront été alimentées en amont par PHP.
Smarty propose de nombreuses fonctionnalités et options, permettant par exemple de créer des conditions, des boucles ou encore de gérer un cache. L’avantage de ce pseudo-langage, c’est que quelqu’un qui n’est pas développeur pourra travailler sur la création des templates Smarty Prestashop. Designer et développeur pourront ainsi travailler conjointement.
Principe de fonctionnement d’un template Smarty Prestashop
L’affichage d’une page web utilisant un template Smarty Prestashop se passe de la façon suivante :
- Le code PHP de Prestashop est lu et interprété.
- Le fichier template Smarty Prestashop est lu.
- Le code contenu dans le template Smarty est compilé : les informations mentionnées dans le langage Smarty sont traduites de façon à pouvoir être utilisées par PHP.
- Les codes PHP provenant de Prestashop et de la compilation du fichier tpl Smarty Prestashop sont rassemblés.
- Le code PHP résultant est exécuté.
Smarty cache Prestashop
Tout cela peut prendre du temps. Dans un soucis de performance, un cache Smarty Prestashop peut être mis en place. Au lieu d’être reconstruites à chaque fois en partant de zéro, certaines pages très demandées peuvent être mises en cache. C’est-à-dire que le résultat final envoyé à l’utilisateur est stocké. Lorsque la même page est demandée, au lieu d’exécuter le code depuis le début, le résultat est directement lu dans le cache et envoyé au navigateur. Les performances s’en trouvent grandement améliorées. Typiquement, une page d’accueil, la liste des produits d’une catégorie ou les promotions en cours peuvent facilement être mises en cache et réutilisées.
Smarty pour les graphistes
L’un des nombreux avantages d’utiliser un moteur de template comme Smarty pour Prestashop, c’est que graphistes et développeurs peuvent travailler séparément.
Le graphiste en charge de la conception de l’aspect visuel et de la création des pages n’a nul besoin de maîtriser la programmation PHP. Il lui suffit d’apprendre la syntaxe du langage de Smarty pour Prestashop. Il conçoit ainsi sa maquette, crée ses pages à l’aide de HTML et de CSS, ajoute des images, des animations…
Aux endroits devant afficher des données issues de la base de données, comme le nom d’un produit, son image ou son prix par exemple, il devra insérer les commandes permettant d’afficher des variables Smarty.
Par exemple, si dans la page on souhaite afficher le contenu d’une variable qui s’appelle « prix », il suffit d’ajouter dans le code HTML l’instruction du langage Smarty suivante : {$prix}. Il pourra également modifier le format d’affichage, en utilisant un modificateur de variable du langage Smarty. Par exemple, {prix|string_format : »%.2f »} permettra d’afficher le prix avec deux décimales. Peu importe la façon dont sera obtenu le contenu de cette variable, le graphiste peut l’intégrer dans sa page.
Naturellement, graphistes et développeurs doivent travailler ensemble pour se coordonner, ne serait-ce que pour se mettre d’accord sur le nom des variables utilisées. Le graphiste possédant les noms des variables existantes et la nature de leur contenu pourra les utiliser plus facilement dans le fichier tpl Smarty. Le développeur, connaissant les noms des variables dont le graphiste a besoin dans son template Smarty Prestashop, pourra les créer et y stocker les informations nécessaires.
Smarty pour les développeurs
Les développeurs vont eux aussi pouvoir se servir des templates Smarty. Naturellement, comme le graphiste, le développeur aura accès à toute la puissance du langage de Smarty pour afficher et manipuler des informations. Il lui sera possible de gérer finalement la configuration des templates Smarty Prestashop, de l’organisation et l’emplacement des fichiers, à la façon dont le cache ou la compilation sont gérés…
Mais le développeur a à sa disposition une autre fonctionnalité de Smarty bien utile : la console de débogage. Cette console va lui fournir tout un ensemble d’informations sur le fonctionnement du template Smarty, sur les extensions Smarty Prestashop utilisées, sur le contenu des différentes variables…
Pour conclure sur Smarty Prestashop
Le moteur de templates Smarty propose donc un ensemble complet d’outils permettant de gérer finement l’affichage des pages d’un site Prestashop. Il va assurer l’ensemble des tâches d’affichage et de rendu des pages Prestashop. L’utilisation de variables Smarty ainsi que de modificateurs va permettre aux graphistes de concevoir les pages correspondant aux urls du site. Les outils de gestion des données, de débogage ou de cache vont permettre aux développeurs d’optimiser l’affichage et les performances.
En séparant l’affichage de la logique métier du site, le moteur de templates Smarty permet d’améliorer l’efficacité de l’équipe en charge du site Prestashop. Graphistes et développeurs travaillent en parallèle et néanmoins ensemble pour un résultat optimal.
Développeur Prestashop depuis plus de 10 ans, je suis à même de vous accompagner dans votre projet de e-commerce et vous aider à intégrer les templates Smarty de votre boutique en ligne. N’hésitez pas à me contacter afin que nous puissions échanger sur vos besoins.
