Email Template Language
Syntax for the Clerk.js template language.
Clerk.io uses Jinja as its email template engine.
Here is a simple example of a template:
<a href="{{ url }}">
<h2>{{ name }}</h2>
<img src="{{ image }}" alt="{{ name }}" />
<div class="price">{{ price | money }}</div>
<button>Buy Now</button>
</a>
Everything within {{
and }}
is processed by the template engine, everything else is used as a raw text template.
A variable is printed by using its name, like so {{ variable_name }}
.
If/Else Statements
The Clerk.js email template language supports the use of If/Else statements, to only show specific content based on comparisons for the available product attributes.
The syntax is:
{% if variable_name %}
Do something
{% else %}
Do something else
{% endif %}
An example:
<a href="{{ url }}">
<h2>{{ name }}</h2>
<img src="{{ image }}" alt="{{ name }}" />
{% if is_on_sale %}
<div class="old-price"><s>{{ list_price | money }}</s></div>
<div class="special-price">{{ price | money }}</div>
{% else %}
<div class="price">{{ money price }}</div>
{% endif %}
<button>Buy Now</button>
</a>
Its also possible to make use of Logical Operators, to use a more advanced logic.
An example:
<a href="{{ url }}">
<h2>{{ name }}</h2>
{% if type == "Shirt" %}
<div class="description">This is one of our awesome shirts</div>
{% endif %}
<img src="{{ image }}" alt="{{ name }}" />
{% if list_price > price %}
<div class="old-price"><s>{{ list_price | money }}<s></div>
<div class="special-price">{{ price | money }}</div>
{% else %}
<div class="price">{{ money price }}</div>
{% endif %}
<button>Buy Now</button>
</a>
Calculations
Liquid supports basic mathematical calculations on number-based attributes.
This can be used for adding, subtracting, multiplying and dividing a number.
The syntax is this: {{ (variable operator number) }}
.
You can even make calculations based on two different attributes and combine them with formatters:
<a href="{{ url }}">
<h2>{{ name }}</h2>
<img src="{{ image }}" alt="{{ name }}" />
<div class="price">{{ (price*1.25) | money }}</div>
<div class="save">Save: {{ ((list_price/price)*100) | round }}%</div>
<button>Buy Now</button>
</a>
Formatters
A formatter is a function that formats a variable before it is printed.
If you have a formatter format
and a variable variable
then the formatter is applied to the variable like so {{ variable | format }}
.
Clerk.js comes with these built-in formatters:
Formatter | Function |
---|---|
round | Rounds to the nearest integer. Syntax: {{ x | round }} . |
money | Formats a decimal number as currency using the US formatting rules. Optional: The amount of decimals to be displayed can be altered by adding a number to the function. Usage: {{ price | money 2 }} Can also be configured for custom price-formatting with this syntax: {{price | money 2, "," , "."}} |
money_eu | Formats a decimal number as currency using the EU formatting rules. |
replace | Replaces all occurrences of a substring, with another. Syntax: {{ name | replace "Expensive","Cheap"}} |
remove | Removes all occurrences of a substring. Syntax: {{ name | remove "John"}} |
upper | Converts all characters in a string to uppercase. |
lower | Converts all characters of a string to lowercase. |
title | Uppercases the first letter of every word in a string. |
nth | Prints the nth element of a list. Syntax: {{ price_list | nth 2 }} |
slice | Prints the slice between two indexes in a list. Syntax: {{ price_list | slice 2, 5 }} |
truncatewords | Prints a set amount of words from a string, with an optional ellipsis if the string is shortened. Syntax: {{ text_string | truncatewords 7, '...' }} |
Updated over 2 years ago