PrestaShop et les courriels

Un site e-commerce a vocation à envoyer un grand nombre d’emails à ses clients ou simples visiteurs : formulaire de contact, création de compte, confirmation de commande, newsletter, demande de devis, relance de panier… PrestaShop a toujours intégré un moteur d’envoi d’emails ainsi qu’un template pour l’ensemble des emails transactionnels. Ce template a bien évolué entre chaque version devenant même responsive, mais il est bien souvent le grand oublié de la personnalisation de votre boutique et cela peut avoir un impact négatif sur votre image.

Mais PrestaShop a pensé à vous et vous met maintenant à disposition différentes solutions pour y répondre, vous permettant d’avoir des emails avec une identité graphique personnalisée et d’y intégrer des contenus additionnels comme des textes, des liens vers vos pages sur les réseaux sociaux, des pages internes (conditions de retour par exemple), des images (numéro vert, azur, …). Et ces solution sont compatibles avec les version 1.5, 1.6 et 1.7 de PrestaShop, il n’est donc pas trop tard pour franchir le pas, même si votre boutique a déjà fêté ses 3 ans.

• Templates d’emails commerciaux prêts à l’emploi proposés sur Addons Marketplace pour un budget de 30 € à 100 € selon le niveau de personnalisation possible
• SDK de création de template basé sur le framework MJML

Dans les 2 cas, il vous sera nécessaire d’installer un module fourni gracieusement par PrestaShop pour intégrer et activer ces templates dans votre boutique, le Module Email Templates Manager

Achat d’un template d’emails

Les templates d’emails que vous pouvez trouver sur Addons Marketplace vous proposent un niveau plus ou moins avancé de personnalisation allant d’un gabarit standard relativement figé à un éditeur de couleur illimité avec choix de couleurs pour différents éléments de l’email, sélection des réseaux sociaux à afficher avec plusieurs type de pictogrammes…

Quel que soit votre choix, vous disposerez au final d’une archive au format Zip qui sera à intégrer dans le module Email Templates Manager.

Création d’un template personnalisé

La création d’un template est possible à partir d’un SDK créé par PrestaShop et que nous avons enrichi pour faciliter notre travail sur nos différents projets. Ces SDK sont disponibles sur GitHub :

• SDK officiel PrestaShop (une Pull Request est en cours pour intégrer nos adaptations) : https://github.com/PrestaShop/email-templates-sdk
• SDK BM Services : https://github.com/BMServices/email-templates-sdk

Pré-requis

Le SDK se base sur des tâches Gulp, lui-même basé sur Node et npm. Ces derniers sont maintenant des outils standard de développement Front-End (HTML, CSS, JavaScript) et l’installation est assez simple et diffère selon votre environnement de travail.

Le SDK embarque un thème par défaut « preston » (la mascotte PrestaShop) qui pourra vous servir de base à la création de votre template personnalisé. Les templates utilisent le framework MJML développé par MailJet (solution reconnue d’emailing créée en France en 2010 et qui envoie plus d’1.5 milliard d’emails par mois [avril 2017]) pour générer facilement du HTML standardisé qui soit responsive et qui s’affiche de manière homogène sur tous les terminaux (smartphone, tablette, ordinateur) ou clients de messagerie (Outlook, Gmail, Thunderbird, …).

Création de votre template

Le plus simple, afin de ne pas partir de zéro, est de dupliquer le thème « preston » dans un dossier à côté, et de le nommer d’après le nom de votre site ou thème.

Une fois cela effectué, la personnalisation peut commencer. La structure de votre thème est la suivante :

• « src » : fichiers de template et de configuration
• « dist »: dossier de travail pour la génération des fichiers « .html » de test et pour l’archive…

Le dossier « src » contient tous les fichiers « .mjml », chacun correspondant à un gabarit d’email PrestaShop, des fichiers de configuration dans le sous-dossier « config » et d’éventuelles images dans le dossier « img » pour des logos, pictogrammes de réseaux sociaux…

Configuration du thème

Le fichier « src/config/settings.json » vous permet de renseigner les informations principales du template : nom, version, auteur… Mais surtout – et c’est là un des grand intérêt du SDK – la possibilité de définir des variables (avec leur nom, leur type, une valeur par défaut, du multi-langue) qui pourront être renseignées lorsque vous activerez votre template dans la configuration du module Email Templates Manager. Très pratique pour des URLs de page de réseaux sociaux, des coordonnées, du texte « dynamique »… mais aussi des codes couleur.

Le MJML

Le MJML est un sur-langage de balises sémantiques dont le but est d’abstraire la complexité grandissante du HTML. L’objectif ? Définir ses propres balises avec des comportements standards sous forme de composants, facilitant ainsi leur déclaration et n’autorisant que des éléments compatibles avec les applications de lecture d’email… plus besoin de se poser la question si tel style est compatible Internet Explorer 10 ou tel autre avec Yahoo Mail, la documentation MJML décrit les attributs possibles pour chaque composant.

Structuration

Au lieu de créer son template avec des tableaux, MJML fournit une grille (un peu sur le principe de Bootstrap) : un composant de contenu est déclaré dans un composant « colonne » (mj-column) > lui-même dans un composant « section » (mj-section) > lui-même dans un « conteneur » (mj-container) :

<mj-container mj-class="body">
  <mj-section mj-class="section">
    <mj-column width="100%">
      <mj-text mj-class="title">${{ lang.hi_firstname_lastname }}

lt;/mj-text> <mj-text mj-class="subtitle">${{ lang.thank_you_for_shopping_with_shop_name }}

lt;/mj-text> </mj-column> </mj-section> </mj-container>

Maintenabilité et gain de temps

Pour ceux ayant déjà modifié le template d’emails fourni avec PrestaShop, l’utilisation du SDK vous apportera un gain de temps plus qu’appréciable sur des adaptations rébarbatives sur les éléments communs à chaque email : l’entête (header) et le pied d’email (footer). Pour cela, MJML vous offre la balise « mj-include » qui vous permet d’inclure un sous-template dans votre template. Et c’est ce que fait le template « preston » du SDK avec des sous-templates pour les sections :

• « header » : équivalent du « <head> » HTML où vous pourrez définir toutes vos classes CSS / MJML et autres styles par défaut
• « logo » : correspond à l’entête d’email où par défaut vous avez le logo centré avec un lien vers votre boutique ainsi qu’un séparateur
• « footer » : correspond au pied d’email où par défaut vous aurez un exemple de réseau social ainsi que le fameux « Powered by… » (il vous suffira maintenant de quelques secondes pour le supprimer partout)

Deux autres sous-templates vous feront également gagner du temps sur un lancement de site :

• « account » : utilisé dans tous les templates de commande (confirmation, paiement, livraison, retour…), qui contient la mention vous invitant à consulter la facture dans votre compte client. Si vous n’utilisez pas la facturation PrestaShop et/ou que vous ne mettez pas à disposition la facture dans le compte client, quelques secondes seront nécessaires pour faire disparaître cette mention présente dans 14 templates.
• « guest_to_customer » : sur le même principe, dans les templates de commande il y a également une mention avec les indications à suivre si vous avez passé commande sans créer de compte client. Cela induit que vous avez activé la fonctionnalité de « Commande express », également appelée « Commande invité », mais comme c’est rarement le cas, il vous faudrait supprimer ce contenu de vos emails, ce qui peut maintenant se faire rapidement.

Vos templates de mail se réduisent donc à la structure globale avec des « include » pour les sections génériques, vous pouvez vous concentrer sur le contenu en tant que tel. Et pour cela MJML vous propose une bibliothèque de composants prêts à l’emploi.

Composants

Chaque contenu doit nécessairement être déclaré dans un composant MJML, sinon, il ne sera pas généré dans le HTML final.

Les composants de contenu incluent des composants HTML « classiques »

• Texte « mj-text » : https://mjml.io/documentation/#mjml-text
• Image « mj-image » : https://mjml.io/documentation/#mjml-image
• Boutons « mj-button » : https://mjml.io/documentation/#mjml-button
• Séparateur sous forme de trait « mj-divider » : https://mjml.io/documentation/#mjml-divider
• Espacement « mj-spacer » : https://mjml.io/documentation/#mjml-spacer
• Tableau « mj-table » : https://mjml.io/documentation/#mjml-table

Du contenu HTML qui ne sera pas retraité par le moteur MJML (pour les puristes ou le HTML très spécifique) :

• Raw « mj-raw » : https://mjml.io/documentation/#mjml-raw

Et des composants avancés (un autre des principaux avantages du MJML), orientés emailing :

• Icônes de réseaux sociaux « mj-social » : https://mjml.io/documentation/#mjml-social
• Accordéon cliquable « mj-accordion » : https://mjml.io/documentation/#mjml-accordion
• Carrousel « mj-carousel » : https://mjml.io/documentation/#mjml-carousel
• Barre de navigation / menu « mj-navbar » : https://mjml.io/documentation/#mjml-navbar
• Hero (bloc avec image de fond et contenu en surimpression) « mj-hero » : https://mjml.io/documentation/#mjml-hero
• Lien Google Maps « mj-location » : https://mjml.io/documentation/#mjml-location

Si vous avez un besoin particulier et récurrent, il vous est même possible de créer vos propres composants. Pour cela, un peu de compétence JavaScript sera nécessaire.

Génération du template

Plusieurs tâches sont disponibles dans le fichier Gulp :

• « build » (avec option « -t NomDuThème ») : génère le fichier Zip final à intégrer sur votre boutique avec les étapes suivantes
  • Transformation des fichiers MJML en fichiers HTML (seul ce format est reconnu par PrestaShop).
  • Copie de certains « .tpl » sources (les fichiers pour les tableaux de produits dans l’email de confirmation de commande).
  • Copie des images.
  • Copie du fichier « preview.jpg » : image affichée pour votre template dans le module Email Templates Manager.
  • Création du Zip avec l’ensemble de ces fichiers.
• « test » (avec option « -t NomDuThème ») : création de fichiers HTML dans le dossier « dist/html » avec injection des données d’exemple. Pratique pour les premières étapes de création de son thème pour disposer d’un rendu au format HTML et donc consultable dans un navigateur
• « watch » (avec option « -t NomDuThème ») : écoute la modification de fichiers pour déclencher automatiquement les mêmes traitements que la tâche « test ». Pratique également lors du développement du template
• « langs:dl » : à lancer avant de démarrer votre projet pour récupérer les dictionnaires de langue utilisés dans les tâches « test » et « watch »

Import et activation de votre template

Pour cela, vous allez devoir installer le module Email Templates Manager. Toutes les actions seront ensuite à effectuer dans la page de configuration de celui-ci :

Import de votre template

Votre fichier Zip, acheté ou généré par vos soins est à renseigner dans la section « Import a pack of template ». Une fois ajouté et enregistré, il apparaît alors dans la liste des templates disponibles.

Activation de votre template

Dans la section « Available templates » où apparaît maintenant votre template avec sa prévisualisation, survolez-le et dans la zone d’action qui s’affiche, cliquez sur « Use this template ». Vous accéderez alors au formulaire de configuration vous invitant à renseigner toutes les variables qui ont été définies pour votre template. Après avoir cliqué sur « Enregistrer », votre template devient enfin le template officiel de votre boutique : à partir de votre template, le module va générer des fichiers HTML finaux, par langue activées sur votre boutique dans le dossier « /themes/%votrethème%/mails ».

À chaque nouvelle version de votre template, il vous faudra le réimporter, et repasser par sa configuration pour mettre à jour les fichiers finaux utilisés par PrestaShop à partir de votre template.