DataFirefly Éditeur d’emails transactionnels pour PrestaShop

Présentation

Le module dfmaileditor remplace le contenu des emails transactionnels de PrestaShop 8 et 9 par des designs construits dans un éditeur visuel. Il ne modifie aucun fichier de /mails ni du thème et n’installe aucun override : au moment de l’envoi, il intercepte l’email par les hooks actionEmailSendBefore et actionEmailAddAfterContent et fournit son propre HTML et sa propre version texte.

Tant qu’un email n’a pas de design actif, PrestaShop envoie son email natif. Si le rendu d’un design échoue, l’erreur est inscrite dans les logs et l’email natif part : aucun envoi n’est jamais bloqué.

Installation

1. Dans Modules > Gestionnaire de modules, cliquez sur Installer un module et envoyez le fichier dfmaileditor.zip.
2. Le module crée ses tables, le dossier img/dfmaileditor pour les images et la page Apparence > Éditeur d’emails.
3. Aucun email ne change à l’installation : les designs sont créés inactifs et vous les activez un par un.

La liste des emails

La page d’accueil du module liste les emails de la boutique par groupe : commandes, paiement, statut de commande, compte client, alertes marchand et autres templates. Les emails des modules installés sont détectés et apparaissent dans le dernier groupe.

• Interrupteur Activé / Désactivé : active le design de l’email. Désactivé, l’email natif est envoyé.
• Concevoir ou Modifier ouvre l’éditeur. La croix supprime le design et rend la main à l’email natif.
• Sous chaque email : la date de la dernière modification et le nombre d’envois faits avec le design sur les 30 derniers jours.
• Le champ de recherche filtre la liste par nom d’email ou par nom de template.

Concevoir tous les emails à partir d’un style

Ce bouton crée d’un coup les designs des 16 emails principaux : confirmation de commande, attente de virement, attente de chèque, paiement accepté, erreur de paiement, préparation en cours, expédié, en transit, en réapprovisionnement, commande annulée, remboursement, bon de réduction, création de compte, invité transformé en client, réinitialisation du mot de passe et alerte nouvelle commande du module ps_emailalerts.

Choisissez un des trois styles en regardant leur aperçu :

• Épuré : bleu marine, police système, alignement à gauche.
• Atelier : titres en Palatino, boutons en contour, coins droits.
• Vif : bandeau coloré en tête, boutons pleins, coins arrondis.

Options : Utiliser ma couleur de marque (réglée dans les Réglages), Remplacer les designs existants et Les activer tout de suite. Sans cette dernière case, les designs restent inactifs pour que vous les relisiez. Les textes sont rédigés dans chaque langue installée parmi le français, l’anglais, l’espagnol, l’allemand, l’italien, le néerlandais, le polonais et le portugais ; les autres langues reçoivent le texte anglais.

L’éditeur

L’éditeur se compose de trois colonnes :

• À gauche, la palette des blocs et la structure de l’email. Cliquez sur un bloc de la palette pour l’ajouter sous le bloc sélectionné, ou faites-le glisser dans la structure. Réordonnez les blocs de la structure par glisser-déposer.
• Au centre, l’aperçu. Un clic sur un bloc le sélectionne. Au-dessus : les langues, le passage ordinateur / mobile, le champ d’ID de commande, l’objet de l’email et la pastille Vérifications.
• À droite, l’onglet Bloc avec les réglages du bloc sélectionné et l’onglet Email avec les réglages de tout l’email.

La barre du haut contient Partir d’un style, Historique, Envoyer un test, l’interrupteur Actif et Enregistrer. Raccourcis : Ctrl+S enregistre, Ctrl+Z annule, Ctrl+Y rétablit, Suppr supprime le bloc sélectionné.

Les blocs

• Contenu : titre, texte (gras, italique, souligné, liens, listes), bouton, image, image et texte, encadré, trois colonnes.
• Commande : détails de la commande (référence, date, paiement, transporteur), produits commandés, totaux, adresses.
• Marketing : produits recommandés, bon de réduction personnel, bannière promo.
• Mise en page : en-tête avec logo, séparateur, espace, réseaux sociaux, HTML personnalisé, pied d’email.

Le bloc Produits commandés affiche pour chaque ligne la photo de la déclinaison commandée, le nom, les attributs, les personnalisations du client, la référence en option, la quantité et le prix unitaire HT ou TTC selon les Réglages. Les Produits recommandés se choisissent automatiquement, parmi les accessoires des produits commandés, les meilleures ventes, les nouveautés ou une liste d’IDs, de 2 à 4 produits ; les produits déjà commandés sont exclus.

Le bloc HTML personnalisé accepte votre propre code, par langue, par exemple un widget d’avis. Les scripts, formulaires, iframes et attributs d’événements sont retirés à l’enregistrement.

Espacements et visibilité

Chaque bloc possède un fond, un espace au-dessus et en dessous, des marges latérales (-1 reprend celles de l’email) et deux options :

• Masquer sur mobile.
• Afficher seulement si cette variable a une valeur : par exemple le bouton Suivre mon colis avec la variable followup, qui disparaît tant que le colis n’a pas de lien de suivi. Dans l’éditeur, un bloc masqué par sa condition apparaît en transparence.

Réglages de l’email

L’onglet Email règle l’objet et le texte d’aperçu affiché dans la boîte de réception (par langue), le fond de page et de l’email, la largeur de 480 à 720 px, les marges, l’arrondi des coins, les polices des titres et du texte et les couleurs : texte, texte secondaire, principale (boutons), texte sur la couleur principale, liens, lignes, fond des encadrés. Un objet vide garde l’objet PrestaShop.

Variables

Le bouton { } à côté des champs ouvre la liste des variables de l’email avec leur valeur d’exemple : {firstname}, {order_name}, {shop_url}, {followup}… Elles sont remplacées par PrestaShop au moment de l’envoi. Les liens peuvent contenir une variable, par exemple {shop_url} ou {followup}.

Langues

Les pastilles au-dessus de l’aperçu changent la langue affichée et éditée. Un point orange sur une pastille signale un texte manquant dans cette langue ; le bloc concerné porte le code de langue dans la structure. Sous un champ vide, le lien Copier le texte depuis reprend le texte d’une autre langue. À l’envoi, un texte manquant est remplacé par celui de la langue par défaut de la boutique, puis par l’anglais.

Aperçu, test et vérifications

• Ordinateur / Mobile affiche l’email dans la largeur d’un écran de 390 px.
• Aperçu avec : saisissez un ID de commande pour voir l’email avec les produits, totaux et adresses de cette commande. Sans ID, des données d’exemple sont utilisées.
• Envoyer un test expédie le contenu de l’éditeur, même non enregistré, à l’adresse choisie et dans la langue choisie. Aucun bon de réduction n’est créé.
• Vérifications signale : un email de plus de 102 Ko (Gmail le coupe et masque la fin), des textes manquants par langue, une image sans texte alternatif, un bouton sans texte ou sans lien, l’absence de texte d’aperçu ou d’en-tête, un bon personnel placé dans un email marchand. Un clic sur un point sélectionne le bloc concerné.

Historique

Chaque enregistrement garde une version, jusqu’à 20 par email. Restaurer recharge une version dans l’éditeur ; enregistrez pour la conserver. La même fenêtre propose Exporter ce design et Supprimer le design.

Partager et copier

• Utiliser ce bloc dans tous mes emails, en bas des réglages d’un bloc : remplace le bloc du même type dans tous les autres emails designés. Un en-tête ou un pied d’email est ajouté là où il manque. Pratique pour changer le pied d’email une seule fois.
• Appliquer ces couleurs et polices à tous mes emails, en haut de l’onglet Email : reporte couleurs, polices, largeur et marges, sans toucher aux objets ni aux textes d’aperçu.
• Partir d’un style > Copier le design d’un autre email : reprend les blocs et les couleurs d’un email déjà designé, en gardant l’objet et le texte d’aperçu de l’email en cours.

Bon de réduction personnel

Ce bloc affiche un code promo unique au client. Réglages : titre, texte, libellé au-dessus du code, bouton et son lien, type de réduction (pourcentage, montant fixe ou livraison offerte), valeur, durée de validité de 1 à 365 jours, minimum de commande et préfixe du code (par exemple MERCI donne MERCI-K7P2M9QX). Dans les textes, {voucher_value} affiche la valeur de la réduction et {voucher_expiry} la date de fin.

• Le code est créé à l’envoi réel de l’email, sous forme de règle panier réservée au client, utilisable une fois.
• Si le même email est renvoyé pour la même commande, par exemple depuis la fiche commande, le code déjà créé est réutilisé.
• Les aperçus et les envois de test affichent un code d’exemple et ne créent rien.
• Le bon n’est affiché que si le destinataire est le client : il n’apparaît jamais dans l’alerte nouvelle commande envoyée au marchand.

Les règles créées portent la description dfmaileditor: nom_du_template dans Catalogue > Réductions > Règles panier.

Bannières promo

L’onglet Bannières promo gère des bannières réutilisables. Chaque bannière a un nom interne, un état, des dates de début et de fin facultatives, une couleur de fond pour la zone de texte et une liste d’emails ciblés (tous ou une sélection). Par langue : image (JPG, PNG ou GIF, 1200 px de large conseillés, 3 Mo max), lien, texte alternatif, titre, texte et code promo à afficher.

Dans un email, le bloc Bannière promo affiche soit la première bannière en ligne qui cible cet email (mode automatique, dans l’ordre de la liste), soit une bannière précise. Une bannière programmée apparaît et disparaît d’elle-même selon ses dates.

Réglages

• Utiliser les emails personnalisés : interrupteur général. Désactivé, tous les emails repartent au format natif, les designs sont conservés.
• Prix TTC dans les blocs produits : prix unitaires et totaux de ligne TTC ou HT.
• Couleur de marque : utilisée par les styles préfaits quand l’option est cochée.
• Taille d’image des lignes de commande et des produits recommandés, parmi les formats d’image produit de la boutique.
• Réseaux sociaux : liens affichés par le bloc Réseaux sociaux, sous forme de pastilles texte. Un champ vide masque le réseau.
• Suivi des liens : ajoute utm_source, utm_medium et utm_campaign (nom du template) aux seuls liens vers votre boutique.

Export et import

Exporter, dans la liste, télécharge un ZIP avec tous les designs de la boutique et les images envoyées par le module ; l’historique d’un email propose l’export de ce seul design. Sans l’extension PHP ZipArchive, l’export se fait en JSON, sans les images.

Importer accepte ce ZIP ou ce JSON. Les images sont contrôlées (JPG, PNG ou GIF réels uniquement) puis copiées dans img/dfmaileditor. Options : remplacer les designs existants, garder actifs les designs qui l’étaient dans l’export. Sans ces cases, les emails déjà designés sont ignorés et les nouveaux designs arrivent inactifs. Les bannières ne font pas partie de l’export.

Dépannage

Un email part toujours au format natif

Vérifiez que le design est actif dans la liste et que l’interrupteur général des Réglages est activé. Si l’email est déclenché depuis le back-office (changement de statut de commande), PrestaShop saute les hooks d’un module quand le profil de l’employé connecté n’a pas le droit Voir sur ce module : accordez-le dans Paramètres avancés > Équipe > Permissions > Modules. Enfin, consultez Paramètres avancés > Logs : une erreur de rendu y est inscrite avec le préfixe [dfmaileditor].

Les images n’apparaissent pas chez le client

Les images sont appelées par l’URL publique de la boutique : elles ne s’affichent pas depuis une boutique locale ou protégée par mot de passe. Certains logiciels bloquent les images jusqu’à ce que le destinataire les autorise ; le texte alternatif s’affiche alors.

Gmail affiche « Message tronqué »

L’email dépasse 102 Ko. Retirez des blocs, en particulier du HTML personnalisé volumineux, ou réduisez le nombre de produits recommandés. La pastille Vérifications donne le poids exact.

Le bon de réduction n’apparaît pas

Dans l’éditeur et dans les tests, un code d’exemple s’affiche. À l’envoi réel, le bon n’apparaît que pour un destinataire unique qui est le client de la commande, ou un client existant pour les emails de compte.

Deux listes de produits dans l’email

Un autre module ajoute ses propres lignes produits aux emails. Désactivez-le pour les emails designés : le bloc Produits commandés affiche déjà les photos.