Tout le monde est d'accord pour dire que construire des e-mails HTML est une démarche compliquée. Or, chez hemmer, il est très fréquent de devoir créer des templates pour e-mails. Campagnes publicitaires sous forme de newsletter ou encore systèmes de notifications complexes sont aujourd'hui très demandés.

Pour y répondre, la solution que nous avons privilégiée est: Foundation pour Email 2. 

En quelques mots, ce framework nous permet de :

• Construire des e-mails HTML responsive
• Intégrer des composants d'interface utilisateur (boutons, menus, grilles, typographies et vignettes)

Il est construit avec les dernières technologies en matière de développement frontend :

• Inky pour le templating
• CSS avec Sass

Intégration à TYPO3

L'idée est de pouvoir combiner la puissance de Inky avec Fluid.

Tout d'abord dans une extension TYPO3 standard il faut créer un répertoire my_t3_ext/Resources/Private/Templates/MailResources dans lequel on va installer le framework.

Pour installer le framework avec le CLI de Foundation lancez foundation new --framework emails dans le répertoire précédemment créé. Installez le CLI en suivant le getting started.

Là, vous allez vous retrouvez avec un projet de base. Dans le fichier Gulp, j'ai changé le répertoire dist par ../Mail pour bien séparer le coté génération et le côté rendu. De cette manière en lançant la commande npm run build on obtient un nouveau répertoire my_t3_ext/Resources/Private/Templates/Mail qui contient les fichiers générés par Foundation. Votre navigateur s'ouvre et vous pouvez prévisualiser votre e-mail.

Vous constatez que ce qui est généré provient des fichiers MailResources/src/layouts/default.html et MailResources/src/pages/index.html. Je vous propose de renommer index.html en Mail.html afin de respecter les conventions de TYPO3.

De Inky vers Fluid

Pour bénéficier des balises Fluid dans Inky, il n'y a pas de configuration particulière à apporter. Vous pouvez simplement ajouter toutes les balises de Fluid en dans votre fichier Mail.html. Attention, si vous devez faire un appel à une variable, vous devrez "échapper" les { et } par des " (double quotes).

Exemple

---
subject: "{mail.subject}"
---
<container>
  <row>
    <columns small="12" large="6">
      <f:if condition="{attachment.properties.title}">
        <f:then>{attachment.properties.title}</f:then>
        <f:else>{attachment.name}</f:else>
      </f:if>
    </columns>
    <columns small="12" large="6">
      <f:translate key="myKey"/>
    </columns>
  </row>
</container>

Cet exemple part du principe que les variables mail et attachment ont été injectées dans le template. Un exemple d'injection de ces variables :

/**
 * Send a template based email.
 */
public function sendTemplateBasedEmail(
    $templateIdentifier,
    $subject,
    array $sender,
    array $recipient,
    File $attachment
) {

    /** @var MailMessage $mail */
    $mail = GeneralUtility::makeInstance(MailMessage::class);
    $mail
        ->setFrom($sender)
        ->setTo($recipient)
        ->setSubject($subject)
        ->attach(\Swift_Attachment::fromPath($attachment->getAbsPath()));

    $plaintextBody = $this->renderEmailBody($templateIdentifier, ['mail' => $mail, 'attachment' => $attachment]);
    $mail->setBody($plaintextBody, 'text/html');

    return $this->sendMail($mail);
}

La méthode renderEmailBody va simplement instancier un objet StandaloneView, lui attribuer des variables et rendre son contenu.

/**
 * Render email body from template identifier
 */
protected function renderEmailBody($templateIdentifier, array $variables)
{
    /** @var StandaloneView $standaloneView */
    $standaloneView = GeneralUtility::makeInstance(StandaloneView::class);
    $extConfiguration = $this->configurationManager->getConfiguration(ConfigurationManagerInterface::CONFIGURATION_TYPE_FRAMEWORK);
    $templateRootPath = GeneralUtility::getFileAbsFileName(end($extConfiguration['view']['templateRootPaths']));
    $standaloneView->setTemplatePathAndFilename($templateRootPath . $templateIdentifier);
    $standaloneView->assignMultiple($variables);

    return $standaloneView->render();
}

Conclusion

On constate que Foundation est une solution qui permet de créer très simplement des templates pour e-mails. En incluant Fluid dans Inky, on peut obtenir très rapidement un template qui sera interprété par TYPO3.