Éditeur d'e-mail enrichi (TinyMCE)
Le corps de chaque message de relance est édité via un éditeur de texte enrichi complet propulsé par TinyMCE, vous permettant de mettre en forme le texte, d'ajouter des liens et d'insérer des variables de modèle sans toucher au HTML brut.
Disponible depuis la v1.0.0
Vue d'ensemble
Lorsque vous ouvrez un message de relance pour l'ajouter ou le modifier, le champ Message à envoyer dans l'e-mail devient un canevas d'édition visuel avec une barre d'outils de mise en forme. L'éditeur s'exécute dans votre navigateur et enregistre votre contenu en HTML, qui est ensuite fusionné dans l'enveloppe du modèle d'e-mail à chaque envoi d'une relance.
L'éditeur est l'intégration TinyMCE native de PrestaShop, il se comporte donc de la même manière que l'éditeur de description de produit ou de page CMS que vous utilisez peut-être déjà. La barre d'outils et les contrôles exacts dépendent de votre version de PrestaShop : PS 1.7 et PS 8 chargent TinyMCE via le wrapper tinySetup() de PrestaShop ; PS 1.6 charge TinyMCE 3 directement avec son thème « Advanced » et une disposition de barre d'outils légèrement différente.
Un détail technique important qui vous concerne : l'éditeur est configuré pour stocker le contenu avec encodage d'entités brut. Cela signifie que les espaces réservés à accolades comme {completename} ou {totalamount} sont enregistrés exactement tels que vous les saisissez — ils ne sont pas convertis en entités HTML — afin que le module puisse les remplacer par des valeurs réelles au moment de l'envoi.
Configuration
L'éditeur est intégré au formulaire de message de relance — il n'existe pas de paramètre séparé pour l'activer ou le désactiver. Il s'active automatiquement chaque fois que vous ouvrez le champ du corps du message.
- Accédez à Modules > Gestionnaire de modules, trouvez Order Payment Reminders Pro et cliquez sur Configurer.
- Faites défiler jusqu'à la section Messages et cliquez sur Modifier à côté d'une relance existante, ou cliquez sur Ajouter un nouveau message.
- Le formulaire de message s'ouvre. Le champ Message à envoyer dans l'e-mail charge l'éditeur TinyMCE une fois que le JavaScript de la page a fini de s'exécuter — attendez l'apparition de la barre d'outils avant de commencer à saisir.
Si vous voyez une zone de texte brut au lieu d'une barre d'outils, le JavaScript de la page ne s'est pas chargé complètement. Rechargez la page et réessayez. Assurez-vous qu'aucune extension de navigateur ne bloque les scripts de votre domaine Back Office.
L'éditeur est également présent dans l'assistant de configuration si vous suivez la configuration guidée initiale.
Paramètres de l'éditeur appliqués par le module
Le module fixe les paramètres TinyMCE suivants. Vous ne pouvez pas les modifier depuis le Back Office :
| Paramètre | Valeur | Pourquoi c'est important |
|---|---|---|
| Format d'élément | html | Le contenu est enregistré en HTML, pas en XHTML |
| Encodage des entités | raw | Les espaces réservés à accolades comme {completename} sont stockés tels quels, sans encodage HTML |
| Autoriser le HTML dans les ancres nommées | activé | Requis pour les liens d'ancre dans le HTML des e-mails |
| Sélecteur de l'éditeur | autoload_rte | L'éditeur s'active uniquement sur le champ du corps du message, pas sur les autres zones de texte de la page |
Fonctionnement
Rédiger et mettre en forme votre message
Saisissez directement dans le canevas de l'éditeur comme vous le feriez dans n'importe quel traitement de texte. Utilisez les boutons de la barre d'outils pour appliquer la mise en forme :
| Contrôle de la barre d'outils | Ce qu'il fait |
|---|---|
| G / I / S | Gras, italique, souligné |
| Barré | Barrer le texte |
| Boutons d'alignement | Aligner à gauche, centrer, à droite ou justifier |
| Format / Police / Taille | Appliquer des niveaux de titre (H1–H4) ou modifier la taille de police |
| Couleur du texte / de l'arrière-plan | Modifier la couleur du texte ou surligner |
| Liste à puces / numérotée | Créer des listes non ordonnées ou ordonnées |
| Augmenter / Diminuer le retrait | Décaler des éléments de liste ou des paragraphes |
| Annuler / Rétablir | Revenir en arrière ou en avant dans vos modifications (Ctrl+Z / Ctrl+Y) |
| Plein écran | Développer l'éditeur pour remplir la fenêtre du navigateur — utile pour les longs messages |
Les raccourcis clavier fonctionnent dans le canevas : Ctrl+B pour le gras, Ctrl+I pour l'italique, Ctrl+K pour insérer un lien.
Insérer des variables de modèle
Les variables de modèle sont des espaces réservés en texte brut — vous les saisissez directement dans le canevas et le module les remplace par des valeurs réelles lors de l'envoi de chaque e-mail.
- Positionnez le curseur là où vous souhaitez que la variable apparaisse.
- Saisissez le nom de la variable entouré d'accolades, par exemple
{completename}ou{totalamount}. - L'espace réservé apparaît comme du texte littéral dans le canevas de l'éditeur. C'est normal — il ne s'affichera pas avec une valeur réelle ici.
Une liste de référence Variables disponibles repliable apparaît sous l'éditeur. Cliquez sur l'en-tête pour la développer et voir tous les noms de variables avec leurs descriptions. Pour la liste complète, consultez Variables de modèle d'e-mail.
Les noms de variables sont sensibles à la casse.
{totalamount}fonctionne ;{TotalAmount}ne fonctionne pas. Copiez toujours le nom de variable exactement tel qu'il apparaît dans la liste de référence.
Insérer un lien
- Sélectionnez le texte que vous souhaitez transformer en lien.
- Cliquez sur le bouton Insérer/Modifier un lien (icône de chaîne) dans la barre d'outils.
- Saisissez l'URL complète dans la boîte de dialogue, par exemple
https://votreboutique.com/commande. - Définissez Cible sur Ouvrir dans une nouvelle fenêtre si vous souhaitez que le lien s'ouvre dans un nouvel onglet.
- Cliquez sur Insérer pour confirmer.
Pour supprimer un lien, placez votre curseur à l'intérieur et cliquez sur le bouton Supprimer le lien (icône de chaîne brisée).
Passer en vue source HTML
- Cliquez sur le bouton Code source (
< >ou HTML sur les anciennes versions PS) dans la barre d'outils. - Le canevas bascule vers une zone de texte HTML brut.
- Effectuez vos modifications directement en HTML.
- Cliquez à nouveau sur le même bouton (ou Mettre à jour, selon votre version PS) pour revenir au canevas visuel.
Utilisez la vue source pour coller un bloc HTML préconçu, supprimer des balises <span> ou <font> indésirables laissées par un collage, ou vérifier qu'un espace réservé de variable est correctement orthographié.
Coller du contenu depuis Word ou Google Docs
Le collage de texte enrichi transporte souvent des CSS cachés ou des balises Microsoft Office qui cassent le rendu des e-mails. Utilisez le bouton Coller comme texte brut (presse-papiers avec un « T ») avant de coller :
- Cliquez sur Coller comme texte brut pour activer/mettre en surbrillance le bouton.
- Collez (
Ctrl+V/Cmd+V). L'éditeur supprime toute la mise en forme externe. - Réappliquez la mise en forme souhaitée à l'aide de la barre d'outils.
Vous pouvez également coller normalement, puis sélectionner tout le texte et cliquer sur Supprimer la mise en forme (icône de gomme) pour supprimer les styles en ligne.
Ajouter des images
L'éditeur inclut un bouton Insérer/Modifier une image, mais les e-mails de relance sont des e-mails HTML envoyés depuis votre serveur. Pour que les images apparaissent dans la boîte de réception des destinataires, elles doivent être hébergées à une URL publiquement accessible.
- Hébergez votre image sur le serveur multimédia de votre boutique, un CDN ou un service d'hébergement d'images public.
- Cliquez sur le bouton Insérer/Modifier une image dans la barre d'outils.
- Collez l'URL publique complète (commençant par
https://) dans le champ Source. - Ajoutez un Texte alternatif descriptif pour les clients de messagerie qui bloquent les images.
- Cliquez sur Enregistrer.
Ne collez pas d'images encodées en base64. La plupart des clients de messagerie les suppriment ou signalent l'e-mail comme spam. Utilisez uniquement des URL hébergées.
Les modèles d'e-mail prédéfinis du module utilisent {shop_logo} — une variable remplacée par l'URL du logo de votre boutique au moment de l'envoi — plutôt qu'un chemin d'image codé en dur. L'utilisation de {shop_logo} dans votre en-tête est l'approche recommandée.
Comment le contenu de l'éditeur est enregistré
Lorsque vous cliquez sur Enregistrer sur le formulaire de message, la sortie HTML de l'éditeur est stockée dans la base de données. Le module insère ensuite ce HTML dans l'enveloppe du modèle d'e-mail (le fichier contenant {wr_title} et {wr_message}) à chaque envoi d'une relance correspondante. Les balises <p></p> vides que TinyMCE ajoute parfois sont automatiquement supprimées avant l'enregistrement.
Exemples d'utilisation
Exemple : Ajouter un rappel de délai de paiement avec mise en gras
Vous souhaitez rappeler aux clients que leur commande sera annulée dans 3 jours. Dans le canevas de l'éditeur, rédigez votre message, puis sélectionnez la phrase « 3 jours » et cliquez sur G dans la barre d'outils. Le texte est enregistré sous la forme <strong>3 jours</strong> et s'affiche en gras dans les clients de messagerie des destinataires. Ajoutez {daysleft} à la place du chiffre littéral pour que la valeur soit toujours précise par commande.
Exemple : Construire une liste structurée d'instructions de paiement
Vous souhaitez inclure les étapes d'un virement bancaire dans l'e-mail. Saisissez chaque étape sur une nouvelle ligne, sélectionnez-les toutes et cliquez sur le bouton Liste numérotée. Ajoutez ensuite un lien hypertexte sur « vos coordonnées bancaires » pointant vers une page de votre boutique. Passez ensuite en vue source pour confirmer que le HTML est propre avant d'enregistrer.
Exemple : Coller un modèle HTML préconçu
Vous avez créé un bloc d'e-mail HTML dans un outil externe. Ouvrez l'éditeur, cliquez sur le bouton Code source, sélectionnez tout le HTML existant et collez votre bloc. Cliquez à nouveau sur le bouton source pour revenir en mode visuel et vérifier la mise en page. Insérez {completename} et {totalamount} aux endroits appropriés, puis enregistrez.
Remarques importantes
- L'éditeur est compatible avec les langues. Si votre boutique dispose de plusieurs langues actives, le formulaire de message affiche un onglet de langue pour chacune. L'éditeur s'active pour l'onglet de langue actuellement sélectionné — basculez entre les onglets et modifiez chaque langue indépendamment.
- L'application d'un modèle d'e-mail prédéfini depuis le sélecteur de modèles remplace l'intégralité du corps du message, y compris toute mise en forme personnalisée déjà ajoutée. Choisissez toujours votre modèle en premier, puis appliquez la mise en forme et les modifications de variables.
- Le champ de l'objet est une entrée en texte brut — TinyMCE ne s'y applique pas. Ne collez pas de HTML dans le champ d'objet.
- La configuration TinyMCE de PrestaShop applique un filtre de sécurité du contenu. Les blocs
<script>en ligne et les sections<style>dans le<head>seront supprimés à l'enregistrement. Utilisez plutôt des attributsstyle=""en ligne sur les éléments individuels. - Le module cible PS 1.5+ et PS 1.6+. PS 1.6 utilise TinyMCE 3 avec une disposition de barre d'outils légèrement différente (plus de boutons sur la ligne 2, pas de poignée de redimensionnement par glisser dans les versions plus anciennes).
- Multi-boutique : le contenu des messages est stocké par boutique. L'éditeur fonctionne de la même manière quel que soit le contexte de boutique dans lequel vous vous trouvez.
Dépannage
| Problème | Solution |
|---|---|
| L'éditeur s'affiche comme une zone de texte brut au lieu d'une barre d'outils | Le JavaScript de la page ne s'est pas chargé complètement. Rechargez la page. Si le problème persiste, vérifiez la console de votre navigateur pour détecter des erreurs et confirmez qu'aucune extension de navigateur ne bloque les scripts de votre domaine Back Office. |
| Le contenu est enregistré mais l'e-mail affiche des balises HTML brutes | Votre HTML s'est peut-être retrouvé dans le champ d'objet, qui est en texte brut. Confirmez que le contenu mis en forme se trouve dans le champ Message à envoyer dans l'e-mail, et non dans l'objet. |
L'espace réservé de variable comme {completename} apparaît comme du texte littéral dans les e-mails reçus | L'espace réservé est mal orthographié. Passez en vue source HTML et comparez l'espace réservé caractère par caractère avec la liste de référence sous l'éditeur. Vérifiez les espaces supplémentaires, les majuscules incorrectes ou les accolades manquantes. |
| Le contenu collé s'affiche mal dans les e-mails reçus | Des CSS externes ou des balises Office ont été inclus dans le collage. Passez en vue source et supprimez les attributs style=, ou recollez en utilisant Coller comme texte brut. |
| Les images n'apparaissent pas pour les destinataires des e-mails | L'URL de l'image n'est pas publiquement accessible. Ouvrez l'URL dans une fenêtre de navigation privée pour vérifier. Remplacez les chemins relatifs (/img/...) par des URL absolues complètes (https://votreboutique.com/img/...). |
| L'éditeur n'apparaît pas dans l'assistant de configuration | L'étape de l'assistant initialise TinyMCE après la fin de son animation. Si l'éditeur est toujours absent après le chargement de l'étape, faites défiler vers le bas et cliquez ailleurs sur la page — l'éditeur peut avoir besoin d'un moment sur les connexions plus lentes. |
| Après l'enregistrement, la réouverture du formulaire affiche l'ancien contenu | Vous avez peut-être navigué ailleurs avant l'apparition de la confirmation d'enregistrement. Vérifiez la liste Messages pour confirmer quelle version a été enregistrée. Le contenu n'est mis à jour que lorsque vous cliquez sur Enregistrer et voyez la bannière de confirmation. |
Foire aux questions
Puis-je rédiger un e-mail en texte brut sans mise en forme ?
Oui. Saisissez directement dans le canevas de l'éditeur sans utiliser aucun bouton de la barre d'outils et le module enregistre votre texte sous forme de simples balises <p>. La plupart des clients de messagerie le rendent comme du texte d'apparence simple. Il n'y a pas de partie en texte brut séparée à configurer — le module envoie un seul e-mail HTML.
Ma mise en forme sera-t-elle perdue si j'applique un des modèles d'e-mail prédéfinis ?
Oui. L'application d'un modèle prédéfini depuis le sélecteur de modèles remplace l'intégralité du corps du message. Choisissez d'abord votre modèle, puis ajoutez votre mise en forme et vos modifications de variables — et non l'inverse.
Puis-je utiliser des tableaux HTML pour la mise en page ?
Oui. Passez en vue source et collez directement votre balisage de tableau. L'éditeur préserve les balises standard <table>, <tr>, <td> et les attributs inline style="". Évitez les noms de classes CSS qui font référence au thème de votre boutique — ces sélecteurs n'existeront pas dans les clients de messagerie des destinataires.
Pourquoi les variables à accolades comme {completename} fonctionnent-elles alors que HTML échappe normalement les accolades ?
Le module configure l'éditeur avec entity_encoding: "raw", ce qui indique à TinyMCE de stocker les accolades et autres caractères tels quels au lieu de les convertir en entités HTML. Cela est appliqué automatiquement — vous n'avez rien de spécial à faire.
Dois-je saisir un message séparé pour chaque langue ?
Oui. Le corps du message est traduisible. Si votre boutique dispose de plusieurs langues actives, le formulaire affiche un onglet de langue pour chacune. Basculez entre les onglets et modifiez le message indépendamment pour chaque langue. L'éditeur est actif pour l'onglet que vous consultez actuellement.
Que se passe-t-il si j'enregistre avec un corps de message vide ?
Le module enregistre un corps vide. Lorsque le cron s'exécute, l'e-mail sera envoyé sans contenu visible dans le corps — seule l'enveloppe du modèle d'e-mail et l'objet apparaîtront. Saisissez toujours le contenu du message avant d'activer une relance.