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).

What you are looking at is a JSON representation of all the data you can use in you WhatsApp checkout message. Including placeholder (sample) 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 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:

Here is a sample template that lists the products as well as says hello and best regards.

Hello there

Here is my WhatsApp order/wishlist:

<% _.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 %>*

_Thank you very much have a great day!_

Best regards

Producing this final WhatsApp message:

Please note that, unlike the email checkout and email sharing templates the WhatsApp template does not support HTML and uses only regular text and the markup "<%= ... %>."

You can, however, use some basic formatting:

To bold something, add an asterisk to either side of the word: *bold*
To italicise something, add an underscore to either side of the word: _italics_

Now, please, let me explain what is going on.

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) %><% } %>
And lastly the gran total:
*Grand total is <%= data.grandTotal %>*

I hope you found this helpfull.

Email checkout: Modify your email templates (Advanced)

Checkout option: WhatsApp