inline – devfrontend.info

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`

<?php
return [
    'system' => [
        'default' => [
            'design' => [
                'email' => [
                    'logo_width' => '100',
                    'logo_height' => '100',
                ],

<?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:

<img src="{{view url='images/mon-image.jpg'}}" height="" width="" alt="{{trans 'Ma clé de traduction'}}" />

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

{{template config_path="design/email/header_template"}}

1	{{template config_path="design/email/header_template"}}

{{template config_path="design/email/footer_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):

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

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).

{{block class='Magento\\Framework\\View\\Element\\Template' area='adminhtml' template='Conversion_Replenish::email/replenish.phtml'}}

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.

{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}

1	{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

ul.mon-menu {
  .simple-inline-nav("|"; 6px; add-both);
}

ul.mon-menu {

.simple-inline-nav("|"; 6px; add-both);

}

Résultat : | entrée 1 | entrée 2 | entrée 3 |

/*
  Simple Inline Nav mixin

  Usage :

  1. Getting a simple inline nav with a separator between each menu entries :
      .simple-inline-nav("|"; 6px);
      =>  entry 1 | entry 2 | entry 3
  2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :
      .simple-inline-nav("|"; 6px; add-first);
      =>  | entry 1 | entry 2 | entry 3
  3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :
      .simple-inline-nav("|"; 6px; add-last);
      =>  entry 1 | entry 2 | entry 3 |
  4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :
      .simple-inline-nav("|"; 6px; add-both);
      =>  | entry 1 | entry 2 | entry 3 |
*/

.simple-inline-nav(@separator; @padding) {
  > li {
    display: inline-block;
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }

  > li:last-child {
    padding-right: 0;

    &:after {
        content: "";
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {
  .simple-inline-nav(@separator; @padding);
  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {
  .simple-inline-nav(@separator; @padding);
  > li:first-child {
    padding-left: @padding;

    &:before {
      content: @separator;
      margin-right: @padding;
    }
  }

  > li:last-child {
    padding-right: @padding;

    &:after {
      content: @separator;
      margin-left: @padding;
    }
  }
}

Simple Inline Nav mixin

Usage :

1. Getting a simple inline nav with a separator between each menu entries :

.simple-inline-nav("|"; 6px);

=> entry 1 | entry 2 | entry 3

2. Getting a simple inline nav with a separator between each entries and a separator before the first entry :

.simple-inline-nav("|"; 6px; add-first);

=> | entry 1 | entry 2 | entry 3

3. Getting a simple inline nav with a separator between each entries and a separator after the last entry :

.simple-inline-nav("|"; 6px; add-last);

=> entry 1 | entry 2 | entry 3 |

4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries :

.simple-inline-nav("|"; 6px; add-both);

=> | entry 1 | entry 2 | entry 3 |

.simple-inline-nav(@separator; @padding) {

> li {

display: inline-block;

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

> li:last-child {

padding-right: 0;

&:after {

content: "";

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) {

.simple-inline-nav(@separator; @padding);

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

.simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) {

.simple-inline-nav(@separator; @padding);

> li:first-child {

padding-left: @padding;

&:before {

content: @separator;

margin-right: @padding;

}

> li:last-child {

padding-right: @padding;

&:after {

content: @separator;

margin-left: @padding;

}

Articles récents

Catégories

Archives

Méta

Étiquette : inline

[Magento 2] Email transactionnels – astuces et bonnes pratiques de customisation

Extension des styles LESS

RECHERCHER ou cibler un template d’email spécifique dans Magento 2

Changer le logo d’un template d’email dans Magento 2

Préparer l’image qui vous servira de logo

Modifier le fichier `app/etc/config.php`

Surcharger le logo natif de Magento 2 par votre propre logo

Surcharger le header et le footer des templates d’email transactionnels dans Magento 2

Header

Footer

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

Bonus: header et footer par défaut pour l’ensemble des gabarits d’email

Test des emails transactionnels dans Magento 2

Inclure des PHTML ou des layouts XML complets dans un email

Inclure des templates PHTML complets dans un email transactionnel dans Magento 2

Inclure des layouts XML complets dans un email transactionnel dans Magento 2

[LESS][Mixin] Une navigation simple en mode « inline » avec les guards

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

Extension des styles LESS

RECHERCHER ou cibler un template d’email spécifique dans Magento 2

Changer le logo d’un template d’email dans Magento 2

Préparer l’image qui vous servira de logo

Modifier le fichier app/etc/config.php

Surcharger le logo natif de Magento 2 par votre propre logo

Surcharger le header et le footer des templates d’email transactionnels dans Magento 2

Header

Footer

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

Bonus: header et footer par défaut pour l’ensemble des gabarits d’email

Test des emails transactionnels dans Magento 2

Inclure des PHTML ou des layouts XML complets dans un email

Inclure des templates PHTML complets dans un email transactionnel dans Magento 2

Inclure des layouts XML complets dans un email transactionnel dans Magento 2

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

Modifier le fichier `app/etc/config.php`