Gérer les modèles d'e-mails dans Prestashop 1.7.6

Gérer les modèles d’e-mails dans Prestashop 1.7.6


Avec l’arrivée de Prestashop 1.7.6 débarque un nouveau thème d’e-mails plus moderne, ainsi qu’un nouveau système pour gérer ces modèles. Pas encore parfait, il s’agit cependant d’une évolution bienvenue. Mais comme toujours avec Prestashop, la documentation manque et certaines subtilités vous feront vous arracher les cheveux. Rassurez-vous, je l’ai fait pour vous et j’ai tout compilé dans cet article sur le sujet.

La gestion des modèles d’e-mails dans Prestashop a toujours été plutôt lourde et pénible à gérer, avec plus de 30 modèles à modifier laborieusement si on souhaite en personnaliser le style.

Et l’ancien système permettant de gérer les e-mails et d’en afficher l’aperçu avait, pour être poli, de nombreuses limitations.

Avec l’arrivée de la nouvelle version 1.7.6 de Prestashop, ceux-ci ont annoncé de nombreuses nouveautés. Et au milieu d’un nouveau module gratuit permettant de gérer les avis clients, j’en parle ici, de petites bannières d’aide qui font jolie et d’aperçu dans Google dans les paramètres SEO, a débarqué une nouvelle manière de gérer les e-mails.

Et j’ai l’impression que cette nouveauté est passée un peu inaperçue. Pour avoir travaillé avec cette nouvelle version de Prestashop pour mes tests et pour mes clients, je peux pourtant vous dire qu’il y a une vraie évolution à ce niveau-là.

Pour peu que l’on connaisse les subtilités du système, ses limitations et comportements bizarres (© Prestashop), on peut mettre en place de nouveaux modèles modernes bien plus rapidement que par le passé.

Bénéficiez des nouveaux modèles sans Prestashop 1.7.6 !

Vous avez une version plus ancienne ?

Bénéficiez des nouveaux modèles sans Prestashop 1.7.6 !

Télécharger ces nouveaux modèles de mails, compatibles avec les versions 1.7 antérieures de Prestashop. Modernisez votre boutique sans appliquer de mise à jour !

Les nouveaux modèles introduits dans la version 1.7.6

Pour commencer, il faut le dire, les nouveaux modèles proposés par Prestashop nativement avec cette version 1.7.6 ont nettement plus de gueule que ce qu’ils nous proposaient par le passé.

En gros, on passe des modèles classic fournis avec la version 1.7 qui ressemblaient à ça :

Modèle d'e-mail classic de Prestashop avant la version 1.7.6
Modèle d’e-mail classic de Prestashop avant la version 1.7.6

À de nouveaux modèles modern qui ressemblent désormais à ça :

Nouveaux modèles d'e-mails "modern" fourni avec la version 1.7.6
Nouveaux modèles d’e-mails « modern » fournis avec la version 1.7.6

Nous sommes d’accord, on ne pourra pas exactement donner à Prestashop le premier prix de l’originalité. On reste dans quelque chose d’assez conventionnel et, dans leur modernité, ces modèles d’e-mails ne fonctionneront pas parfaitement avec tous les systèmes d’e-mails.

Outlook par exemple (quelle surprise) ne se souciera pas d’ajouter une ombre autour du conteneur de l’e-mail et le pied de page sera aligné à gauche plutôt que de s’afficher centré.

Mais dans l’ensemble, cette mise à jour est la bienvenue et la plupart des systèmes d’e-mails modernes tels que Gmail proposeront un affichage assez fidèle et un résultat nettement au-dessus des anciens modèles classic.

Cependant au premier coup d’œil, si vous êtes comme moi, vous avez envie d’ajuster 2-3 choses, changer la couleur des liens par exemple et, surtout, supprimer le Powered by Prestashop en fin d’e-mail.

Découvrons ensemble comment fonctionne ces nouveaux modèles et comment les gérer.

La nouvelle interface de gestion des e-mails

Si vous naviguez un peu dans l’interface de cette version 1.7.6 de Prestashop, vous découvrirez un nouveau menu sous Personnaliser > Apparence > Thème d’email.

Nouvelle interface de gestion des e-mails dans Personnaliser > Apparence > Thème d'email

Cette nouvelle vue se compose de 3 sections principales.

Paramètres

Paramètres de la nouvelle interface de gestion des e-mails

Cette première option permet de définir le thème par défaut utilisé pour les e-mails. Cette action ne changera pas les e-mails enregistrés sur votre boutique, il n’exécutera pas une nouvelle génération d’e-mails, cependant cette option a deux effets :

  • Dans la section suivante, Générer des e-mails, le thème d’e-mail par défaut sera celui-ci
  • Si vous ajoutez une nouvelle langue dans Prestashop, les e-mails seront générés sur la base de ce thème par défaut

Générer des e-mails

Génération des e-mails de la nouvelle interface de gestion des e-mails

Cette section est spécifique à la génération des modèles d’e-mails. À l’installation de Prestashop, les e-mails par défauts générés sont réalisés avec le nouveau thème d’e-mail.

Mais si vous apportez des modifications au thème modern au sein des fichiers de Prestashop, si vous créez un nouveau thème (comme nous allons le voir plus loin), si vous préférez plutôt utiliser l’ancien thème d’e-mail, etc. c’est ici que vous pourrez recréer les modèles utilisés sur votre site.

En fait les modèles d’e-mails dans Prestashop sont désormais des modèles .twig dynamiques, dans lesquels vous pourrez utiliser des paramètres de Prestashop (logo, URL, assets, traductions, etc.). Mais ceux-ci ne seront pas interprétés à l’envoi d’un e-mail, il est nécessaire de forcer la génération des modèles d’e-mails pour que les fichiers du thème et de la langue demandée soient créés.

Donc ici vous commencez par spécifier :

  • Le thème à utiliser pour générer vos modèles d’e-mails
  • La langue pour laquelle générer les modèles
  • Le thème de votre boutique Prestashop
  • Si vous souhaitez écraser les modèles s’ils existent déjà

Pour clarifier le 3e point, il s’agit de l’endroit dans lequel l’ensemble des modèles d’e-mails au format .html et .txt vont être générés.

Cœur (indépendant du thème)

Avec cette option choisie, les modèles d’e-mails seront générés dans la racine de Prestashop sous :

/mails/[langue]

Modèles d'e-mails enregistrés dans le cœur de Prestashop (indépendants du thème)

Ces modèles ne seront utilisés que si vous ne disposez pas de modèles dans les sous-dossiers du thème de votre boutique

Thème XY (classic, votre thème, etc.)

Là vous pourrez spécifier de générer ces modèles spécifiquement pour un thème donné. Cette action créera les modèles dans :

/themes/[nom du thème]/mails/[langue]

Modèles d'e-mails enregistrés dans le thème choisi de Prestashop

Ces modèles auront donc préséance sur ceux du cœur, si vous utilisez le thème en question.

Thèmes d’e-mails

Thèmes d'e-mails de la nouvelle interface de gestion des e-mails

Dans cette section, vous pourrez prévisualiser les modèles d’e-mails pour vos différents thèmes. Pour se faire, cliquez sur la loupe à gauche du nom du modèle.

Vous arriverez alors dans une nouvelle vue présentant la liste des modèles. Et pour chacun des fichiers, vous pourrez :

  • Cliquer sur HTTP pour voir un aperçu de votre thème dans le navigateur
  • Cliquer HTML brut pour voir le contenu HTML du modèle interprété
  • Cliquer sur Texte pour voir la version texte brut du modèle
  • Envoyer un e-mail de test pour avoir un aperçu dans votre gestionnaire d’e-mails

Ces aperçus ne sont pas dépendants des fichiers générés. Vous verrez plus loin qu’en modifiant les modèles d’e-mails .twig, il n’y aura pas besoin de générer les e-mails à nouveau pour avoir un aperçu des modifications.

Créer ses propres modèles

Vous pouvez modifier le thème modern ou même classic selon vos envies, mais le problème avec les fichiers natifs c’est qu’ils risquent d’être écrasés par une future mise à jour.

Heureusement, le système de modèles d’e-mails vous permet de créer et de personnaliser un nouveau thème d’e-mails.

Créer un nouveau thème

Vous trouverez les thèmes d’e-mails installés dans :

/mails/themes/

Là vous devriez avoir deux dossiers : classic et modern. Le plus facile pour créer un nouveau thème ? Copier le dossier du thème sur lequel vous aimeriez baser votre nouveau thème.

Vous pouvez aussi vous amuser à tout recréer, en prenant comme base la structure du dossier modern par exemple, mais si le style visuel général de ce thème vous convient, contentez-vous d’un copié-collé.

Pour information, voici comment sont formés les dossiers de thèmes :

  • assets : Dossier contenant en général des images spécifiques aux e-mails
  • components : Modèles .twig utilisés pour les parties réutilisables du modèle (layout, en-tête, pied de page et layout spécifique aux e-mails liés à la commande, par défaut).
  • core : Modèles .twig utilisés pour les différents modèles d’e-mails
  • modules : Ce dossier contient des sous-dossiers par modules, pour les modèles spécifiques aux modules installés sur le site

Ensuite, renommez simplement votre dossier au nom du thème que vous souhaitez créer. Par exemple youplaboum :

Votre nouveau thème d'e-mails dans les dossiers de Prestashop

Et en accédant à l’interface de gestion des e-mails, vous découvrirez alors votre nouveau thème youplaboum dans la liste :

Votre nouveau thème d'e-mails dans l'interface

Plutôt facile !

Modifier les dépendances des fichiers

Votre premier réflexe sera peut-être de vous rendre dans le fichier :

\mails\themes\youplaboum\components\header.html.twig

Et d’aller modifier le CSS pour changer la couleur des liens de vos modèles. Sauf que si vous génériez vos modèles avec uniquement cette modification, même en choisissant votre nouveau thème, cela ne fonctionnerait pas.

On est chez Prestashop, les subtilités, c’est leur métier ! Dans chacun des modèles se trouvant dans core, vous verrez qu’un appel est fait au fichier layout.html.twig du thème, présent dans components.

Sauf que l’appel à ce modèle se fait sous cette forme :

{% extends '@MailThemes/modern/components/layout.html.twig' %}

En gros, la page hérite du fichier layout.html.twig. Sauf que le lien est absolu et pointe toujours vers le dossier du thème modern ! Donc dans chaque modèle présent dans :

\mails\themes\youplaboum\components\

Vous devrez modifier l’appel au modèle de base en :

{% extends '@MailThemes/youplaboum/components/layout.html.twig' %}

Mais cette action ne vous permettra toujours pas de profiter des modifications apportées au fichier header.html.twig. Pour se faire, rendez-vous dans votre fichier layout.html.twig et modifiez les lignes includes (par exemple ici l’en-tête) de :

{% include '@MailThemes/modern/components/header.html.twig' %}

Vers :

{% include '@MailThemes/youplaboum/components/header.html.twig' %}

En gros, pour chaque fichier présent dans votre thème, recherchez un appel fait à la variable @MailThemes (qui représente le dossier parent des thèmes) et remplacez le chemin vers votre nouveau thème.

Désormais, tous vos fichiers doivent hériter et inclure les modèles présents dans votre thème.

Modifier les images utilisées

J’ai évoqué tout à l’heure le fait que le dossier assets contenait des images spécifiques aux e-mails. Les seules images présentes par défaut avec le modèle modern concernent le modèle de confirmation de commande :

\mails\themes\youplaboum\core\order_conf.html.twig

Si vous vous rendez dans ce modèle, vous pourrez voir les appels aux images du thème. Mais ceux-ci ne se font pas à l’aide de la variable @MailThemes.

Voici à quoi ressemble l’un de ces appels :

[...]
<img src="{{ mailThemesUrl }}/modern/assets/baseline-local_shipping-24px.png" style="margin-right:10px">
[...]

La variable utilisée ici est mailThemesUrl, qui représente la même valeur que @MailThemes, pour information. Donc pour pointer vers votre nouvelle image, vous pouvez simplement modifier modern en youplaboum.

Bien sûr, vous pouvez également créer de nouvelles images, changer leur nom et les charger de la même manière.

Tester l’aperçu

J’en ai parlé plus haut, pour tester une modification, rien de plus simple : rendez-vous simplement dans l’interface de gestion des e-mails, cliquez sur la loupe à côté de votre thème youplaboum, puis cliquez sur HTTP pour afficher l’aperçu du fichier modifié.

Ça fonctionne non ? Non ? Tiens !

Je vous présente une nouvelle subtilité made in Prestashop ! Peut-être que cet élément sera corrigé par la suite, mais pour vous assurer de voir apparaître vos modifications à l’aperçu de votre modèle d’e-mails, vous devez vider le cache après vos modifications et avant de lancer l’aperçu.

Oui, c’est un peu laborieux, mais pour le moment vous ne pouvez pas y couper. Donc, rendez-vous dans Configurer > Paramètres avancés > Performances et cliquez en haut à droite sur Vider le cache.

Configurer > Paramètres avancés > Performances et cliquez en haut à droite sur Vider le cache.

Et comme vous pouvez le voir dans cette capture, je n’ai pas de cache activé, les templates doivent être recompilés à chaque fois, etc. Sauf que les modèles twig présents dans le dossier mails ne sont pas recompilés après une modification.

Générer les modèles

Voilà, vous avez apporté les modifications nécessaires à vos modèles, videz le cache 15 fois pour ajuster vos modifications, testé l’envoi d’e-mail pour voir le résultat, bref, vous êtes fin prêt à générer vos modèles d’e-mails !

Dans ce cas comme expliqué plus haut, rendez-vous dans l’interface de gestion des e-mails, dans la section Générer des e-mails et choisissez votre nouveau thème d’e-mail, la langue et si vous souhaitez générer les e-mails pour un thème uniquement ou pour le cœur de Prestashop.

Voici le type de réglage que j’utilise :

Générer des e-mails pour votre nouveau thème

En général, je génère toujours les modèles spécifiquement pour le thème que j’utilise, pour éviter que des modèles du thème aient préséance et j’écrase à chaque fois les templates.

Et voilà le travail. 🙂

Conclusion

Cette mise à jour des modèles d’e-mails est clairement bienvenue. Comme vous pouvez le voir, il y a cependant quelques particularités, encore présentes dans cette version 1.7.6, qui rendent certaines actions un peu laborieuses.

En fonction des mises à jour du système, peut-être que certains de ces problèmes disparaîtront, si c’est le cas j’essaierai de mettre à jour cet article. Mais malgré ces petits soucis, cette évolution apporte un vrai plus pour gérer les modèles d’e-mails dans Prestashop, action qui jusqu’ici était vraiment problématique, longue, pénible, etc.

Il y aurait peut-être mieux à faire en matière de gestion des dépendances et les modèles modern par défaut ne sont pas forcément parfait, avec certains CSS inline qui écrase des directives présentes dans l’en-tête ou d’autres petites spécialités.

Mais le système est suffisamment flexible pour vous permettre, avec un peu de ténacité, de monter des modèles de mails professionnels et à l’image de votre boutique.

Et grâce à cet article, vous devriez en être capable !



Aucun commentaire

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