Using Twig

Twig overview

Twig syntax provides a simple, powerful way to
include dynamic content, directly within email templates. Twig syntax allows all of
this dynamic templating to occur outside of code, meaning changes are done quickly in the
template, with no update to a code base required.

Personalizing email with Twig

We support the use of Twig in our emails. This page will describe how to use the following
helpers:

• Substitution
• Conditional statements
• Iterations

This page has use cases with examples that include the described helpers.

Use cases

Here are example use cases listed with the Twig helpers used to build the example templates.

Receipts

This is an example
receipt template.

This receipt template is using these helpers:

• Substitution
• Conditional statements
• Iterations

Multiple languages

This is an example
template that lets you have content in multiple languages.

This template is using this helper:

• Conditional statements – if/else

Newsletter

This is an example
newsletter template.

This template is using these helpers:

• Substitution
• Iterations

Advertisement

This is an example
template that is advertising items on sale.

This template is using these helpers:

• Substitution
• Conditional statements – if/else
• Iterations

Twig reference

This reference goes through examples of each helper – including HTML email snippets, and JSON
test
data.

Substitution

There are four main types of substitutions:

• Basic replacement
• Deep object replacement
• Object failure
• Replacement with HTML

Basic replacement

HTML should contain:

<p>Hello @{{firstName}}</p>

Test Data should contain:

{"firstName":"Ben"}

Resulting replacement:

<p>Hello Ben</p>

Deep object replacement

HTML should contain:

<p>Shipping to @{{shippingAddress.country}}</p>

Test Data should contain:

{
"shippingAddress":{
"country":"US"
}
}

Resulting replacement:

<p>Shipping to US</p>

Object failure

HTML should contain:

<p>Hello @{{user.email}}</p>

Test Data should contain:

{
"user":{
"email":"[email protected]"
}
}

Resulting replacement:

<p>Hello</p>

Conditional statements

Here are three types of conditonal statements:

• Basic If, Else, Else If

Basic If, Else, Else If

HTML should contain:

{%if customer.male %}
<p>Dear Sir</p>
{% elseif customer.female %}
<p>Dear Madame</p>
{% else %}
<p>Dear Customer</p>
{% endif %}

Test Data should contain: 1

{
"customer": {
"male":true
}
}

2

{
"customer": {
"female":true
}
}

3

{
"customer": {
}
}

Resulting replacement: 1

<p>Dear Sir</p>

2

<p>Dear Madame</p>

3

<p>Dear Customer</p>

Iterations

Basic Iterator

HTML should contain:

<ol>
{% for product in products %}
<li>You ordered: @{{product.sku}} for: @{{product.price}}</li>
{% endfor %}
</ol>

Test Data should contain:

{
"products":[
{
"sku":"10001",
"item":"200"
},
{
"sku":"10002",
"item":"300"
}
]
}

Resulting replacement:

<ol>
<li>You ordered: 10001 for: 200</li>
<li>You ordered: 10002 for: 300</li>
</ol>

Combined examples

Here are two combined examples:

• Dynamic content creation

Dynamic content creation

HTML should contain:

{% for product in products %}
{% if product.sku == "10001" %}
<p>The shoe costs @{{product.price}}</p>
{% elseif product.sku == "10002" %}
<p>The hat costs @{{product.price}}</p>
{% endif %}
{% endfor %}

Test Data should contain:

{
"products":[
{
"sku":"10001",
"price":"200"
},
{
"sku":"10001",
"price":"200"
},
{
"sku":"10002",
"price":"400"
}
]
}

Resulting replacement:

<p>The shoe costs 200</p>
<p>The shoe costs 200</p>
<p>The hat costs 400</p>