Html mails versturen in Drupal 8/9 via code. Een Drupal module voorbeeld inclusief Twig template

17 Aug 2020

(Available as freelancer)
Joris Snoek
Business Consultant
/ Drupal Developer

Vorige maand hebben we een user story geïmplementeerd, waarin we html e-mails moesten verzenden vanuit Drupal 9 modules. Dit moet schaalbaar zijn, als in: verschillende modules moeten flexibel html kunnen verzenden vanuit een generiek html template, via generieke code. Er zijn enkele blogs en tutorials die ons hebben geholpen, maar na enige tijd van coderen en het uitproberen van verschillende modules en opties binnen die modules, hebben we het eindelijk op een mooie, generieke en schaalbare manier voor elkaar gekregen.

Dus ik dacht dat meer mensen mooie html e-mails zouden willen sturen vanuit Drupal 8/9: ik heb de code geïsoleerd en een installeerbare voorbeeldmodule gemaakt.

Copy and run off

Ik heb het hier op Github gepubliceerd, dus je kunt het kopiëren en ermee doen wat je wilt. Op dit moment is het geen gepubliceerd Drupal.org project met allerlei configureerbare dingen.

Installatie instructies

Clone de repo en installeer hem als een custom module in Drupal; hij is niet gefaciliteerd in Composer / Packagist. De Drupal module is afhankelijk van de Swiftmailer module, die afhankelijk is van de Mailsystem Drupal module. Nadat je hem hebt geïnstalleerd, moeten deze drie modules worden ingeschakeld:

Configuratie instructies

Configureer mailsystem
Ga naar /admin/config/system/mailsystem en kopieer deze configuratie:

  1. Formatter: kies 'Swiftmailer'.
  2. Sender: kies 'Default PHP Mailer', op een of andere manier werkte het niet met 'Swiftmailer'. Het duurde eeeerug lang voordat ik dat doorkreeg.
  3. Kies het actieve theme (custom of contrib), dit is nodig zodat Swiftmailer de clean html Twig override detecteert voor de e-mails:

Kopieer Twig template override

Kopieer het bestand 'swiftmailer-lucius-html-mail.html.twig' naar de map '/templates' van je aangepaste theme. Dit is de html template override, die Swiftmailer later zal gebruiken en die je naar wens kunt afstemmen.

Swiftmailer configuratie
Ter info: alle 'Transport settings' in Swiftmailer config kunnen op standaard worden gelaten (zie /config/swiftmailer/transport).

De Drupal-code uitgelegd

1. hook_mail() in .module-bestand

Allereerst, om gebruik te maken van het mailsysteem van Drupal moet je hook_mail in het .module-bestand implementeren:

  1. Haal Drupal's global site name -en e-mail op.
  2. Dit kostte nogal wat tijd om erachter te komen, maar je moet deze headers definiëren om Drupal html mails te laten werken.
  3. Extra parameters om Twig html e-mail template te voeden.

2. Custom Drupal Service 'lucius_html_mail.mail'.

Ik implementeerde een custom Drupal Service 'lucius_html_mail.mail', onder andere voor scalability: deze services handled alle generieke benodigdheden voor het versturen van html mails, andere modules kunnen hiervan gebruik maken via Dependency injection en html mails versturen m.b.v. variabelen: mail content in dit geval.

  1. Definieert onze custom Mail Service en injecteert 2 externe Services.
  2. Constructor om 2 externe Services te faciliteren.
  3. Bouw de mailing variabelen, loop door gebruikers en verstuur ten slotte de e-mails.

3. Drupal Route en Controller om mailing te testen.

Ik heb een Route '/ send_test_mail' gedefinieerd. Als je in je browser naar die url gaat, wordt de code in sendTestMail() uitgevoerd.

Als alles in orde is dan ontvangen alle gebruikers de voorbeeld e-mail.

!) Zorg er dus voor dat je dit test in een omgeving waar mails niet naar de buitenwereld kunnen gaan, wij gebruiken bijvoorbeeld lokale Docker met Mailhog. (!

  1. Drupal's Dependency Injection in actie: injecteer onze custom Service 'lucius_html_mail.mail'.
  2. Bereid alle parameters voor de mail voor met statische voorbeeldteksten. Verstuur dan de mails via onze Service method 'sendMail ()'.
  3. Eenvoudige hulpfunctie om alle gebruikers te krijgen.

Dus als je naar '/ send_test_mail' gaat, zouden alle gebruikers een e-mail moeten ontvangen die er als volgt uitziet:

4. Custom Twig override 'swiftmailer--lucius-html-mail.html.twig'

Zoals eerder vermeld, moet swiftmailer - lucius-html-mail.html.twig ergens naar de map /templates van je (custom) theme worden gekopieerd. Ik vond deze html code in deze open source repo. Het is zelfs responsive en gebruikt veel inline stijlen, nodig om het compatibel te maken met alle zoveel mogelijk e-mail clients.

Zoals je kunt zien, zijn er Twig variabelen, ik gebruik vooral de waarden in de $message array. Deze variabelen komen overeen met de parameters die we eerder hebben ingesteld. Functie Lucius_html_mail_mail() (hook_mail) gooide onze parameters in één $message array, die kan worden gebruikt in de Twig template zoals weergegeven in bovenstaande afbeelding.

Wijzig dit template dus naar wens, of implementeer een geheel nieuw template met andere variabelen. Het ligt nu allemaal in jouw handen, maak het zoals je wilt op een schone, responsive en schaalbare manier!

Handig: Twig template file override suggestions

Als je Development mode in Drupal inschakelt, kun je alle template suggesties zien om nog verder te gaan:

Wrap up

Ok, dat is het voor nu. Hopelijk kun je nu mooie html e-mails implementeren voor je Drupal 8/9-systeem. Als je meer uitleg nodig hebt, of het lukt het niet: laat het me weten!

Comments

Nóg meer
kennis nodig?

Check mijn blog archief >