Testé Magento 2.3 et 2.4
Comment changer, sans passer par l’interface d’administration mais dans le code source, le logo et surcharger le header et le footer des templates d’email transactionnels? Ressources officielles en ligne pour la gestion des emails transactionnels dans Magento 2:
- Les bases du développement d’emailings transactionnels sous Magento 2 (surcharge, extension, où et comment?)
- RECHERCHER ou cibler un template d’email spécifique dans Magento 2
- Changer le logo d’un template d’email dans Magento 2
- Afficher une image stockée dans un thème
- Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2
- Test des emails transactionnels dans Magento 2
- Inclure des PHTML ou des layouts XML complets dans un email
- Gérer plusieurs headers/footers de mails transactionnels dans Magento 2 – Attention: j’ai testé ce code en 2.4 et moyennant une petite modification par rapport à ce qui est indiqué dans le config.xml, on arrive effectivement à avoir nos templates spés disponibles en BO, mais je ne suis pas parvenu à les lier aux corps des emails via la directive
{{template config_path="design/email/footer_invoice_template"}}donnée en exemple…
- Guide plus exhaustif que la doc officielle: How to Style Email Templates in Magento 2 et la version PDF.
Extension des styles LESS
L’extension des styles LESS se fait dans le thème. Chemin: app/design/frontend/MyVendor/mytheme/web/css/source/_email-extend.less.
RECHERCHER ou cibler un template d’email spécifique dans Magento 2
Il arrive, dans des projets complexes, que les emails sont éclatés en une multitude de fichiers, eux-mêmes consignés dans une multitude de modules. La méthode la plus simple pour trouver un template est de faire une recherche sur un bout de texte contenu dans l’email dans les fichiers au format CSV du code source.
Changer le logo d’un template d’email dans Magento 2
Préparer l’image qui vous servira de logo
Première étape: voir ici comment préparer un logo pour les emails transactionnels dans Magento 2.
Votre fichier sera, de préférence au format PNG et son libellé sera logo_email.png.
Modifier le fichier app/etc/config.php
|
1 2 3 4 5 6 7 8 9 |
<?php return [ 'system' => [ 'default' => [ 'design' => [ 'email' => [ 'logo_width' => '100', 'logo_height' => '100', ], |
Puis exécuter la commande $ n98-magerun2 setup:upgrade$ n98-magerun2 app:config:import.
Surcharger le logo natif de Magento 2 par votre propre logo
Chemin du fichier source: vendor/magento/module-email/view/frontend/web/logo_email.png. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/web/logo_email.png.
Surcharger le header et le footer des templates d’email transactionnels dans Magento 2
Header
Chemin du fichier source: vendor/magento/module-email/view/frontend/email/header.html. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/email/header.html.
Footer
Chemin du fichier source: vendor/magento/module-email/view/frontend/email/footer.html. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/email/footer.html.
Afficher une image stockée dans un thème
Comme d’hab: rien dans la doc à ce sujet à part pour le logo et aucun code fourni sur les forums ne fonctionne… Faire comme ceci:
|
1 |
<img src="{{view url='images/mon-image.jpg'}}" height="" width="" alt="{{trans 'Ma clé de traduction'}}" /> |
Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2
edit: source officielle (toujours mieux) Email templates Variable Reference.
Source: A Complete List of Default Variables Used in Magento 2 Email Templates et la version PDF pour la postérité.
ATTENTION: il y a un souci de formattage des double quotes dans la doc officielle. Si cous copiez/collez ceci: {{config path=”general/store_information/name”}} dans votre code source, l’information ne sera pas récupérée. Il faut mettre ceci: {{config path="general/store_information/name"}}.
Bonus: header et footer par défaut pour l’ensemble des gabarits d’email
|
1 |
{{template config_path="design/email/header_template"}} |
|
1 |
{{template config_path="design/email/footer_template"}} |
Test des emails transactionnels dans Magento 2
Dev tips #1: Avant de tester vos changements effectués dans les templates HTML ou les styles CSS/LESS, la seule commande à taper est la suivante (si vous êtes en mode developer):
|
1 |
find pub/static/frontend/MyVendor -type f \( -name '*.css' \) -delete; find var/view_preprocessed/pub/static/frontend/MyVendor -type f \( -name '*.css' -o -name '*.less' \) -delete |
Dev tips #2: La page de réinitialisation du mot de passe (fonctionnalité « mot de passe oublié? ») est une bonne manière de s’envoyer des emails transactionnels de test dans Magento 2.
- mailtrap.io – un service de test d’emailings gratuit (50 envois/jour ou 500 envois/mois) qui permet d’afficher les emails en vues smartphones, tablettes et desktops, de voir le code source, etc… Fournit quelques outils pratiques pour le débug.
- Supprimer les limites par défaut du nombre maximum d’envoi de requêtes pour changer son mot de passe (5 fois) et du temps minimum à patienter entre deux envois de requête d’un nouveau mot de passe (10 minutes): Magento 2 Forgot Password Says Too many password reset requests et la version PDF
Inclure des PHTML ou des layouts XML complets dans un email
Inclure des templates PHTML complets dans un email transactionnel dans Magento 2
Magento 2 not able to load phtml file in email template .html file. Pas la peine de doubler les slashes (testé fonctionne Magento 2.4).
|
1 |
{{block class='Magento\\Framework\\View\\Element\\Template' area='adminhtml' template='Conversion_Replenish::email/replenish.phtml'}} |
Inclure des layouts XML complets dans un email transactionnel dans Magento 2
Un bon exemple dans le code source de Magento 2.
|
1 |
{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}} |