Clerk.js's markup language is a subset of the Liquid markup language.
Here is a simple example of a template:
<h1>Our Most Popular Products</h1>
<ul class="product-list">
{% for product in products %}
<li class="product">
<h2 class="product-name">{{ product.name }}</h2>
<img src="{{ product.image }}" title="{{ product.name }}" />
<div class="price">${{ product.price | money }}</div>
<a href="{{ product.url }}">Buy Now</a>
</li>
{% endfor %}
</ul>Everything within {{ and }} is processed by the template engine as a expression, everything with '{%' '%}' is a statement and everything else is used as raw text.
If a variable contains a deeper structure, like a dictionary, it can be accessed by dot syntax like so
`{{ customer.name }}ยด.
The Clerk.js template language supports the use of If/Else statements, to only show content based on whether a specific variable exists, has the value True or more advanced expressions such as checking if a price is above a certain limit.
The syntax is:
{%if Expression %}
Do something
{% else %}
Do something else
{% endif %}
An example (remember: The template variables may vary from shop to shop):
<a href="{{ url }}">
<h2>{{ name }}</h2>
<img src="{{ image }}" alt="{{ name }}" />
{% if is_on_sale && in_stock > 0 %}
<div class="old-price"><s>{{ list_price | money }}</s></div>
<div class="special-price">{{ price | money }}</div>
{% else %}
<div class="price">{{ price | money }}</div>
{% endif %}
<button>Buy Now</button>
</a>This also works with the handlebar style of opening and closing if sentences.
An example:
{% #if variable_name <= value/variable_name %}
Do something
{% /if %}
Unlike handlebar you cannot open a statement with {{ as they are reserved for expressions.
Liquid support iterating over an array of values, with the {% for %} operator.
{% for element in itterable %}
{{ element }}
{% endfor %}
An example:
<a href="{{ url }}">
<h2>{{ name }}</h2>
{% if variants %}
<ul class="product-variants">
{% for variant in variants %}
<li>{{ variant.name }}</li>
{% endfor %}
</ul>
{% endif %}
<img src="{{ image }}" alt="{{ name }}" />
<div class="price">{{ money price }}</div>
<button>Buy Now</button>
</a>This also works with a handlebar style each like so.
{% #each itterable %}
{{ this }}
{% /each %}
A filter is a function that formats a variable before it is printed.
If you have a formatter filter and a variable variable then the filter is applied to the variable like so {{ variable | filter }}.
Clerk.js comes with these built-in filters:
round
Rounds to the nearest integer, like so {{ x | round }}.
pct
Gives you the percentage of two numbers, like so {{ x | pct y }}.
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 }}
money_eu
Formats a decimal number as currency using the EU formatting rules.
Optional: The amount of decimals to be displayed can be altered by adding a number to the function. Usage: {{ price | money_eu 2 }}
nth
Returns a value from a list (x), based on the index given (y), like so {{ x | nth y }}
min
Returns the lowest value from a list
max
Returns the highest value from a list
You can add you own filter functions in the Clerk.js Configuration.
A filter function takes one or more arguments and returns a string or number. Here is an example of our round formatter:
function(x) {
return Math.round(x).toString();
}