This guide is for users who create their own HTML templates to use in Ometria and is written for email developers with knowledge of HTML.
This page documents all of the supported logic which can be used on email templates used with Ometria.
Filters
batch
The batch command is used to return a list with the specified amount of items.
Input:
{% set items = ["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6"] %}
{% for item in items | batch(2) %}
<div class="items">
{% for items in item %}
{{ items }}
{% endfor %}
</div>
Output:
Item 1 Item 2
Item 3 Item 4
Item 5 Item 6
This can be used for dynamic product blocks.
E.g. The product selector uses the batch command to display up to X items:
<div om:block="Product selector">
<table><tbody><tr>
<!-- {% for product in products | batch(3) | first %} -->
<th><table><tbody>
<tr>
<th>
<center>
<a href="{{product.url}}" target="_blank">
<img alt="{{product.title}}" src="{{product.image_url | safe}}&size=150x150&mode=pad">
</a>
<p>{{product.title}}</p>
<p>{{product.price}}</p>
</center>
</th>
</tr>
</tbody></table></th>
<!-- {% endfor %} -->
</tr></tbody></table>
{% set product_button_text = '' %}
</div>
capitalize
Capitalize makes the first letter upper case.
This can be used to standardise casing in dynamic tags like profile.name or product description.
Input
Silk Blouse with Tie Collar
{{ basket.products[1].title | capitalize }}
Output
Silk blouse with tie collar
first
This will get the first item in an and array, or the first letter in a string.
Input
{% set products = ["product 1","product 2","product 3"] %}
{{ products | first }}
{% set name = 'Bob' %}
{{ name | first }}
Output
Product 1
B
This can be used in the product selector block to select the items within the array (selected products):
<table om:editable="products" om:id="product-chooser" class="row" style="display: table; padding: 0; position: relative; width: 100%"><tbody><tr>
<!-- {% for product in products | batch(3) | first %} -->
<th class="small-12 large-4 columns first last" style="font-weight: normal; margin: 0 auto; padding-bottom: 16px; padding-left: 10px; padding-right: 10px; text-align: center; width: 184px"><table style="width: 100%"><tr><th style="font-weight: normal; text-align: center">
<center style="min-width: 152px; width: 100%">
<a href="{{product.url}}" target="_blank" align="center" class="float-center" style="color: #333333; text-decoration: none">
<img alt="{{product.title}}" class="small-float-center float-center" src="{{product.image_url | safe}}&size=150x150&mode=pad" width="150" style="border: none; clear: both; display: block; float: none; margin: 0 auto; max-width: 150px; outline: none; text-align: center; text-decoration: none; width: 150px">
</a>
<table align="center" class="spacer float-center" style="float: none; margin: 0 auto; text-align: center; width: 100%"><tbody><tr><td height="10px" style="font-size:10px;line-height:10px"> </td></tr></tbody></table>
<p class="text-center float-center" style="-moz-hyphens: none; -webkit-hyphens: none; Margin-bottom: 0px; hyphens: none; margin: 0 0 10px; margin-bottom: 0px; min-height: 2.5em; text-align: center; width: 100%" align="center">{{product.title}}</p>
<p class="text-center float-center" align="center" style="-moz-hyphens: none; -webkit-hyphens: none; Margin-bottom: 0px; hyphens: none; margin: 0 0 10px; margin-bottom: 0px; text-align: center; width: 100%">{{product.price}}</p>
</center>
</th></tr></table></th>
<!-- {% endfor %} -->
</tr></tbody></table>
float
Float converts a value into a floating point number.
0.0 is returned if conversion fails.
The default can be overridden by using the first parameter.
Input
{{ "3.5" | float }}
Output
3.5
int
Int converts a value to an integer (whole number).
0 is returned if conversion fails.
Input
{{ "3.5" | int }}
Output
3
length
The length filter returns the length of an array, string or number of keys in an object.
Input
{{ [1,2,3] | length }}
{{ "test" | length }}
{{ {key: value} | length }}
Output
3
2
1
For example, you can use length when displaying the total basket products in an email campaign:
{{basket.products | length}}
Products in cart will display X products in cart.
lower
Lower converts a string to all lower case.
Input
{{ basket.products[1].title | lower }}
Output
silk blouse with tie collar
replace
Replace can be used to swap one item with another.
The first argument specified is the item to be replaced whereas the second item is the value that will replace it.
There are multiple use cases for this, e.g. replacing text in dynamic URLs, editing product text for a specific campaign.
Input
{{ profile.name | replace(" ", "_") }}
Output
Bob_Jones
round
Round will round up/down a value to the closest full number.
E.g. To round up/down product prices.
Input
{% set price = 3.99 %}
Only £{{ price | round }}
Output
Only £4.0
This can be used in conjunction with int to output an integer:
Input
{% set price = 3.99 %}
Only £{{ price | round | int }}
Output
Only £4
sum
sum displays the sum (total) of items in an array:
Input
{% set items = [1,2,3] %}
{{ items | sum }}
Output
6
title
Title capitalises each first letter in a string.
Input
{{profile.name | title}}
Output
Bob Jones
upper
Upper converts the text in the string to upper case.
Input
{{ profile.name | upper }}
Output
BOB JONES
urlencode
urlencode will use UTF-8 encoding to escape strings for use in URLs.
This accepts dictionaries, regular strings and pairwise iterables.
Input
{{profile.email | urlencode}}
Output
example%40example.com
This is useful when outputting dynamic URLs - urlencode ensures the links are formatted correctly for the browser.
wordcount
wordcount will count and output the number of words in a string.
Input
{% set name = "Bob Jones"%}
Output
2
This can be used in conjunction with other operators to return a specific value.
Example:
{% set product_text = "T shirt with long sleeves"%}
{% if product_text | wordcount >= 4 %}
<span style="font-weight:bold;">{{product_text}} </span>
{% else %}
<span style="font-weight:normal;">{{product_text}} </span>
{% endif %}
Conditions
If/elif/else condition
The if condition tests a condition and selectively displays content.
It behaves in the same way as JavaScript's if condition. (If X is true, do this).
The else condition manages the fallback; this displays content when the if condition criteria is not met.
Input
{% set country = "DE" %}
{% if country == "FR" %}
Bonjour {{profile.firstname}}
{% elif country == "DE" %}
Guten tag {{profile.firstname}}
{% else %}
Hey {{profile.firstname}}
{% endif %}
Output
Guten tag Bob
For condition
The for loop will iterate through arrays and dictionaries.
Input
{% set items = "product 1", "product 2" %}
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% else %}
<li>This would display if the 'item' collection were empty</li>
{% endfor %}
</ul>
Output
- product 1
- product 2
This can be used to iterate through products and display X amount of products in an email.
These are useful for product blocks in automation campaigns.
The example below sets the maximum products to 3, columns to 3 and sets the retrieved products as basket.products.
The for loop will iterate through until it reaches 3:
{% set max_products=3 %}
{% set cols=3 %}
{% set products = basket.products %}
{% for x in range(max_products) %}
{% if loop.index0 % cols == 0 %}
<table style="display: table; padding: 0; position: relative; width: 100%">
<tbody>
<tr>{% endif %} {% if products[x] %}
<th class="small-12 large-4 columns first last" style="font-weight: normal; margin: 0 auto; padding-bottom: 16px; padding-left: 10px; padding-right: 10px; text-align: center; width: 208px">
<table style="width: 100%">
<tr>
<th style="font-weight:normal">
<center>
<a href="{{products[x].url}}" target="_blank" align="center" style="text-decoration: none">
<img src="{{products[x].image_url}}&size=300x300&mode=pad" width="150">
</a>
<p align="center"> <a href="{{products[x].url}}" target="_blank" style="color: #333333; text-decoration: none">{{products[x].title}}</a>
</p>
<p align="center">{{products[x].price}}</p>
</center>
</th>
</tr>
</table>
</th>
{% endif %}
{% if loop.index % cols == 0 %}
</tr>
</tbody>
</table>
{% endif %}
{% endfor %}
Global Functions
Range
Range iterates over a fixed set of numbers. Range generates the set for you.
Numbers begin at start (default 0) and increment by step (default 1) until it reaches stop, which it doesn’t include.
This can be used with other conditions to output a set number of products.
Input
{% for i in range(0, 5) -%}
{{ i }},
{%- endfor %}
Output
0,1,2,3,4.
Math
Nunjucks allows operation on values.
The following operators are available for use:
|
Operator |
Input |
|
Addition |
+ |
|
Subtraction |
- |
|
Division |
/ |
|
Division and integer truncation |
// |
|
Division remainder |
% |
|
Multiplication |
* |
|
Power |
** |
Input
{{ 2 + 3 }}
{{ 10/5 }}
Output
5
2
Logic
Nunjucks also allows the following logic operators:
- and
- or
- not
Use parentheses to group expressions.
Input
{% set users = "user 1", "user 2"%}
{% if users and showUsers%}
both exist
{% else %}
both dont exist
{% endif %}
Output
Both don't exist
Comments
0 comments
Please sign in to leave a comment.