Templating Language For Everyone: How To Code A Receipt Email

Grégory Betton
Mailjet Dev
Published in
4 min readApr 4, 2017

We are developers, like you. And what we hate above all in coding is to repeat ourselves. DRY isn’t just a concept for us, and we strongly recommend code reuse… So when it comes to writing email templates, we want to provide our users with the best tools to produce content in the most efficient way possible.

Templating language for everyone, from beginners to power users

To speed up the development of responsive emails, we’ve already told you about MJML, the open-source email framework we’ve created. If you’re not familiar with it, go check it out right away. You can thank us later.

But even if MJML can help you save quite a lot of time and ease the process, you’ll probably want more. We hear you.

MJML and templating language, a superhero duo

Today, flexibility and personalization are a must-have in the email industry. Transactional emails imply more and more complex business logic, and one can often struggle to try to juggle a lot of different templates, when they could just have one personalized email that adapts to several use cases. Having a separate template for men and another one for women, or creating specific campaigns to recommend different things based on your customer’s previous purchases is not viable.

It is in this kind of situations that a templating language comes in handy. OK, let’s be a bit naive and accept that you could write your own. But to be able to implement a tokenizer and a grammar, you need to have a good knowledge in the field and, at the end of the day, you might just be reinventing the wheel when you could have been focusing on your core business instead… You could instead use nice libraries such as Handlebars, Jinja or Twig, but then you’ll still need to write or host a dedicated service to handle the templating processing.

Too hard. So how can I master this, once and for all?

We have the solution. Because at Mailjet we know the value of a fully integrated templating language, we created our own with our Transactional Send API in mind. Our idea: one template to rule them all, just with a single API call.

Pretty awesome, we know.

So, let’s recap: MJML for producing responsive HTML emails without effort, plus a templating language to bring them to life with conditional blocks and variables. This combo can change your life as a developer. But, enough words, you’ll definitely want some action.

Every Tuesday in April, starting today, we will show you how to create and send awesome transactional emails, step by step. Each tutorial will explore a very common use-case, providing numerous examples, code snippets and nice visuals. We’ve even created an easy-to-execute tool, written with NodeJS, to test emails under actual conditions. To use it, you’ll just need valid credentials for both MJML API and Mailjet Transactional Send API, but don’t worry if you’re a newcomer: applying for the MJML API beta and creating a Mailjet account are totally free.

Today we’ll start with an e-commerce receipt email. If you want to be the first to know about the next use-cases, make sure you subscribe to our developers-only newsletter.

Sending an e-commerce receipt via email: a quick introduction

From online shoe stores to indie music platforms, any company selling a product online will have to send a receipt. You may think this is a simple task but, actually, there are several elements you’ll need to consider. Let’s review them briefly, before jumping over to our tutorial, from the more obvious ones to the less:

  1. You will have to loop over the list of items (cart, abandoned cart, recommendations, etc.) and display them.
  2. You need to display the price and may have to do some calculus directly in the email logic (Total, VAT and other taxes). Care, as you may use different currencies!
  3. You need to include some basic billing information (billing address, order number, etc.) but you can also provide more personalized information (for instance, you could warn your users that their registered credit card is about to expire).
  4. If there’s shipping, you should display the delivery address.
  5. Your user may have to forward the receipt for accounting purposes, so you should ease this workflow.
  6. You can insert marketing content to your receipt, such as a history of previous items or new promotions based on what your user just bought.
  7. If your website supports multiple languages, your emails should too.

Sounds like something you’re already doing? Or are you not sure how to implement some of these elements? Worry not, we’ll tackle all these needs, and more, in our detailed tutorial.

Ready to see it in action? Time to jump over to Github.

Do you want to be informed about the next tutorials? Go subscribe to our dev-only newsletter. And if you want to chat with us, come and say “hi” on Twitter.

Originally published at www.mailjet.com on April 4, 2017.

--

--

Grégory Betton
Mailjet Dev

Tech content writer @Mailjetdev and Social geek — Let’s have a chat!