In this post I want to tell you our way how we handle the problem to style transaction emails efficiently. The main problem is that it is rather difficult to style them in native email clients. For this we use the following tools:
- SMTP support via our extension: https://github.com/Magenerds/Smtp
- Mail Hog: https://github.com/mailhog/MailHog
Mail Hog is open source software built with Go, which allows you to view the transaction emails in a browser. Therefore it is very easy to inspect and change the css with any browser developer toolbox. Furthermore it is very easy to connect via SMTP to it.
Setting up smtp
We use our SMTP extension so that Magento 2 can send emails to a SMTP server. You can configure the smtp configuration in
'smtp' => [ 'host' => 'mail.server.ip', 'auth' => '', 'ssl' => '', 'port' => '1025', 'username' => 'user', 'password' => 'password', ],
Alternatively you can use the command line as we implemented it as deployment configuration:
bin/magento setup:config:set --help --smtp-host External SMTP host for mail transport --smtp-auth Authentification method for SMTP transport --smtp-ssl Use ssl or tls to secure SMTP transport --smtp-port SMTP port --smtp-username SMTP usename --smtp-password SMTP password
This lets you configure different systems (test, staging, live etc.) with different environments.
Setting up Mail Hog
We make our life easy as we set up mail hog in our existing docker environment, as Mail Hog itself suggests to use it in a docker container. Mail Hog is set up with this simple command:
docker run -d --name mailhog -p 1025:1025 -p 8025:8025 mailhog/mailhog
You can open its web interface at
http://127.0.0.1:8025/ where you can see all incoming mails. The configured smtp port is 1025.
This is an easy way to style your transaction emails efficiently and fast. We also expanded this set up with our own docker image which lets you configure which emails should be sent directly to a native client and which should be sent to Mail Hog. Check it out at github.