The purpose of this article is to present the most used commands and all the functions that can be used to boost your store’s email templates using Message Center.
To configure its templates, Message Center uses a language called Handlebars, with a few commands that make it easy to implement while expanding its customization.
When editing the email template on VTEX Admin, in Store Settings > Email Templates > Templates, it is possible to use a range of variables provided by the system. To use these variables in the email layout, you must follow this syntax using Handlebars: {{class.attribute}}. The {{class.attribute}} is obtained using the JSON Data field.
Always configure transactional email templates relying on the information retrieved by the Get Order API.
Check out the following example in which the template uses the HostName information from the JSON Data:
HTML email template:
_10<strong>{{_accountInfo.HostName}}</strong>
Example JSON Data:
_10"_accountInfo": { _10 "HostName": "lojadosuporte" _10}
Result: lojadosuporte
The above example can have different values when comparing Sellers and Marketplaces.
Functions
The use of the functions follows the syntax {{function class.attribute}}.
Consider the following JSON Data example to understand the available functions, described in the table below.
Example JSON Data:
_14"items": [ _14 { _14 "name": "Product A", _14 "sellingPrice": 20000, _14 "priceValidUntil": "2050-05-30T21:00:00Z", _14 "deliveryTime": "8bd" _14 }, _14 {_14 "name": "Product B", _14 "sellingPrice": 3000, _14 "priceValidUntil": "2050-09-23T11:00:00Z", _14 "deliveryTime": "10d" _14 } _14]
| Function | Description | Example syntax | Example result |
|---|---|---|---|
formatCurrency | Formats a value as currency, separating decimal values with a comma ,. | {{formatCurrency items.0.sellingPrice}} | 200,00 |
formatUSDCurrency | Formats a value as currency, separating decimal values with a dot .. | {{formatUSDCurrency items.0.sellingPrice}} | 200.00 |
formatCurrencyWithoutDecimals | Formats a value as currency without decimal values. | {{formatCurrencyWithoutDecimals items.0.sellingPrice}} | 200 |
multiplyCurrency | Formats a value as currency and multiplies it by a number. This function has the following syntax: {{formatCurrency class.attribute multiplier}} | {{formatCurrency items.0.sellingPrice 4}} | 800,00 |
formatDate | Formats a date as dd/mm/yyyy. | {{formatDate items.0.priceValidUntil}} | 30/05/2050 |
formatUSDate | Formats a date as mm/dd/yyyy. | {{formatUSDate items.0.priceValidUntil}} | 05/30/2050 |
formatDateTime | Formats a date as dd/mm/yyyy hh:mm:ss. | {{formatDateTime items.0.priceValidUntil}} | 30/05/2050 21:00:00 |
formatDateUtc | Formats a date as dd/mm/yyyy mh:mm:ss and converts it to the local UTC | {{formatDateUtc items.0.priceValidUntil}} | 30/05/2050 18:00:00 |
replace | Replaces a given value with another. This function has the following syntax: {{replace class.attribute "previous value" "new value"}} | {{replace deliveryTime "bd" " business days"}} | 8 business days |
If necessary, you should add currency symbols — such as
$orR$— directly on the template, since they are not automatically retrieved by functions.
Example
Handlebars code:
_21{{#each items}} _21{{name}} _21Entrega{{#each ../shippingData.logisticsInfo}} _21{{#eq itemId ../id}} _21{{#each slas}} _21{{#eq ../selectedSla id}} _21{{#if deliveryWindow}} _21agendada entre{{formatDateTime deliveryWindow.startDateUtc}} e {{formatDateTime deliveryWindow.endDateUtc}} _21{{else}} _21em até{{#hasSubStr shippingEstimate 'bd'}} _21{{replace shippingEstimate 'bd' ' dias úteis.'}} _21{{else}} _21{{replace shippingEstimate 'd' ' dias.'}} _21{{/hasSubStr}} _21{{/if}} _21{{/eq}} _21{{/each}} _21{{/eq}} _21{{/each}} _21{{quantity}}x R$ {{formatCurrency sellingPrice}} _21{{/each}}
Result:
