This article refers to the WhatsApp messaging app. iPaper supports a checkout option for WhatsApp, but cannot offer support on setting up your WhatsApp account.
📖 This guide explains:
Templates are expressed as markup. Using the JavaScript Underscore framework, it is possible to create dynamic templates that are enriched with data. This section explains how to utilize the functionality of the Underscore framework in your templates.
Variable substitution in WhatsApp (non-HTML)
In order to use the value of a variable in a template, the following syntax is used:
Grand total = <%= data.grandTotal %>
Where data is the JSON object containing all available information, and the grandTotal is the dynamic value we want to include.
When the template is being processed, all <%= ... %> tags will be replaced for actual values.
The example above will be dynamically replaced with:
Grand total = 319.8
The contents and structure of the data object differs depending on which context the template is being used in. In the template editor, you can view a context specific example of how the data object is structured (under the Sample Input tab).
In the Sample Input pane is a JSON representation of all the data you can use in your WhatsApp checkout message, including placeholder data:
{
“language”: {
“title”: “Shopping list”,
“item”: “Item”,
“price”: "Price",
"amount": "Amount",
"total": "Total",
"grandTotal": "Grand total",
"description": "Description"
},
"settings": {
"hidePrices": false,
"decimalSeparator": ".",
"currency": "DKK"
},
"senderName": "John",
"items": [
{
"itemID": "XYZ25",
"name": "Club soda",
"price": 79.95,
"amount": 4,
"totalPrice": 319.8,
"description": "Effervescent beverage"
}
],
"grandTotal": 319.8
}
Loops
It is possible to create a dynamic structure for your template by using loops. This becomes useful if it is needed to create variable number of table rows, for instance.
To use a loop, the following syntax is used:
<% _.each(data.items, function(item) { %>
<%= item.amount %> x <%= item.itemID %> : <%= item.name %> <% }); %>Where data.items is an actual collection 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.
Sample WhatsApp template:
Below is a sample template that:
lists the products
includes a greeting (“Hello ” and “Regards”)
Hello
Here is my WhatsApp order:
<% _.each(data.items, function(item) { %><%= item.amount %> x *<%= item.name %>* - <%= item.itemID %> <% if (!data.settings.hidePrices) { %> - <%= item.price.toFixed(2).replace('.', data.settings.decimalSeparator) %> / <%= (item.amount * item.price).toFixed(2).replace('.', data.settings.decimalSeparator) %><% } %>
<% }) %>
*Grand total is <%= data.grandTotal %>*
_Have a great day!_
Regards
The sample message explained
To include every item on the list the templates must include a loop. This is the beginning of the loop and is says: “Repeat for every item in data.items.”
<% _.each(data.items, function(item) { %>
Then comes: amount x (times) item name and i use the item ID.
<%= item.amount %>x*<%= item.name %>*-<%= item.itemID %>
Note: Inside the loop, every item data point can be called by using:
- item.itemID
- item.name
- item.price
- item.amount
- item.totalPrice
- item.description
Then this says: If the hide prices setting is not turned on:
<% if (!data.settings.hidePrices) { %>
Then show the price, with the right decimal, either comma (,) or full stop (.)
<%= item.price.toFixed(2).replace('.', data.settings.decimalSeparator) %>
Then show the subtotal, with the right decimal, either comma (,) or full stop (.)
Amount of items * item price.
<%= (item.amount * item.price).toFixed(2).replace('.', data.settings.decimalSeparator) %><% } %>
Lastly, the grand total:
*Grand total is<%= data.grandTotal %>*
This producing the following WhatsApp message:
⚠️ Unlike email checkout and email sharing templates, the WhatsApp template does not support HTML and uses only regular text as well as the markup
<%= ... %>.
The format does allow for some basic formatting:
To bold something, add an asterisk to either side of the word: *bold*
To italicize something, add an underscore to either side of the word: _italics_