Are you here looking to edit your WhatsApp Checkout template please click here:
Are you here looking to edit your Email Checkout template, then please read on:
Email templates are expressed as HTML and markup language. Using the Javascript Underscore framework, it is possible to create dynamic email templates enriched with data. This section explains how to utilize the functionality of HTML + the Underscore framework in your email templates.
Variable data substitution in email templates (used with HTML)
In order to use the value of a variable in a template, the following syntax is used:
<%= ... %>
Here is an example featuring the bottom section (table row) of an HTML table. This partial HTML table includes three empty cells and then the translated data item title for grand total, the grand total value and the currency set in the shop settings of the particular flipbook.
<table>
... (First rows of the tabel are removed for clarity)...
<tr>
<td></td>
<td></td>
<td></td>
<td><strong><%= data.language.grandTotal %></strong></td>
<td><strong><%= data.grandTotal %> <%= data.settings.currency %>
</strong>
</td>
</tr>
</table>
Let's dive in to each single value used above, here is the first one specifically:
<%= data.language.grandTotal %>
Here "data." represents the JSON objects containing all available information (values), and "language." is a nested JSON objects of the available (auto-translated) names, finally "grandTotal" is the value we want to include.
When the template is being processed into the final email, all "<%= ... %>" tags will be replaced for actual values (when structured correctly.)
The example above data.language.grandTotal will be dynamically replaced with the translation for gran total in the language set in flipbook regional settings. data.grandTotal will show the total amount for the entire checkout of all the items in the individual order.
Lastly the data.settings.currency will pull the currency setting specified in the shop configuration on the filpbook.
So, when the languge is set to English and the currency setting is set to EUR, all of this will translate to the following, in the final email:
Grand total 319.8 EUR
Sample Input
The available "data" object options differs slightly depending on the type of email template and the form fields used.
In the template editor, you can view a example of how the "data" object is structured (under the "Sample Input" tab).
What you are looking at, in the sample input tab, is a JSON representation of all the data object its nested objects and the items array, that you can use in your sharing and checkout emails. Including some placeholder (sample) data:
"itemID": "XYZ25",
Here is the full JSON formatted list:
{
"language": {
"title": "Shopping list",
"item": "Item",
"price": "Price",
"amount": "Amount",
"total": "Total",
"grandTotal": "Grand total",
"description": "Description"
},
"settings": {
"hidePrices": false,
"decimalSeparator": ".",
"currency": "DKK"
},
"catalogUrl": "http://demo.ipapercms.dk/Products/Demo1/",
"items": [
{
"itemID": "XYZ25",
"name": "Club soda",
"price": 79.95,
"amount": 4,
"description": "Effervescent beverage"
}
],
"grandTotal": 319.8,
"sender": {
"name": "data.fields["Sender name"]",
"email": "data.fields["Sender email"]"
},
"recipient": {
"name": "data.fields["Recipient name"]",
"email": "data.fields["Recipient email"]"
},
}Loops
It is possible to create a dynamic structure for your template by using loops. This becomes useful to create the variable number of table rows, when including one row for every item in the order.
To use a a loop, the following syntax is used.
<% _.each(data.items, function(item) { %>
(... Repeated content ...)
<% }); %>
Where "data.items" is an actual collection (array) of items in the JSON "data" object. The "item" object will be accessible within the loop, and represents the current item. The loop will execute as many times as the number of items in the collection being iterated. Within the body of the loop, regular variable substitution can be used on the "item" object.
Here is a complete HTML table (simplified) where the top and bottom table rows are static but the middel row is repeated (looped) for every item in the checked out list.
<table>
<tr>
<td><strong><%= data.language.item %> ID</strong></td>
<td><strong><%= data.language.description %></strong></td>
<td><strong><%= data.language.price %></strong></td>
<td><strong><%= data.language.amount %></strong></td>
<td><strong><%= data.language.total %></strong></td>
</tr>
<% _.each(data.items, function(item) { %>
<tr>
<td><%= item.itemID %></td>
<td><%= item.name %></td>
<td><%= item.price %></td>
<td><%= item.amount %></td>
<td><%= (item.amount * item.price) %></td>
</tr>
<% }); %>
<tr>
<td></td>
<td></td>
<td></td>
<td><strong><%= data.language.grandTotal %></strong></td>
<td style="border-top: 1px solid black; border-bottom: double"
<strong><%= data.grandTotal %> <%= data.settings.currency %>
</strong>
</td>
</tr>
</table>
A sample complete receipt email template:
Here is a sample email template that lists the products and says "hi" and "best regards."
<html>
<head>
<title><%= data.language.title %></title>
<style>body, td { font-family: Verdana; font-size: 12px; }</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Hi <%=data.fields["Contact name"]%></p>
<p>Here are the items you picked out from the catalog at <a href="<%= data.catalogUrl %>"></a><%= data.catalogUrl %></p>
<p>This mail is just for reference. You should receive an order confirmation from us shortly</p>
<table>
<tr>
<td><strong><%= data.language.item %> ID</strong></td>
<td><strong><%= data.language.description %></strong></td>
<% if (!data.settings.hidePrices) { %>
<td><strong><%= data.language.price %></strong></td>
<% } %>
<td><strong><%= data.language.amount %></strong></td>
<% if (!data.settings.hidePrices) { %>
<td><strong><%= data.language.total %></strong></td>
<% } %>
</tr>
<% _.each(data.items, function(item) { %>
<tr>
<td><%= _.escape(item.itemID) %></td>
<td><%= _.escape(item.name) %></td>
<% if (!data.settings.hidePrices) { %>
<td><%= item.price.toFixed(2).replace('.', data.settings.decimalSeparator) %></td><% } %>
<td><%= item.amount %></td>
<% if (!data.settings.hidePrices) { %>
<td><%= (item.amount * item.price).toFixed(2).replace('.', data.settings.decimalSeparator) %></td><% } %>
</tr>
<% }); %>
<tr>
<td></td>
<td></td>
<td></td>
<td><strong><%= data.language.grandTotal %></strong></td>
<td style="border-top: 1px solid black; border-bottom: double"><strong><%= data.grandTotal %> <%= data.settings.currency %></strong></td>
</tr>
</table>
<p>
</br>
</br>
Best regards
</br>
- The iPaper Team
</p>
</body>
</html>
IMPORTANT NOTE: Please remember that when when you accidentally delete part of one of these code block <%= data.grandTotal %> like this %= data.grandTotal %> then the template won't work until you put it back.
Just be aware of that one.
So, if you have a little working knowledge on HTML your should now be able to modify your iPaper email templates.
And should you run into any challenges, what so ever, then please be in touch!
I hope you found this helpful.
Happy con-templating :D :D :D