The Clerk.io Developer Hub

Welcome to the Clerk.io developer hub.

This is site is only technical specification for developers.

You'll find comprehensive guides and documentation to help you start working with Clerk.io at our Help Center

Get Started    

Template Language

How to style the results from Clerk.io.

Clerk.js's template language is a subset of the Liquid template language.

Here is a simple example of a template:

<h1>{{ headline }}</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 }}" />
 
      {% if product.price < product.list_price %}
        <div class="list-price">${{ product.list_price | money }}</div>
        <div class="price">${{ product.price | money }}</div>
        <div class="discount">You Save: {{ product.price / product.list_price * 100 | round }}%</div>
      {% else %}
      	<div class="price">${{ product.price | money }}</div>
      {% endif %}
        
      <a href="{{ product.url }}">Buy Now</a>
    </li>
  {% endfor %}
</ul>

Inserting Values

Everything within {{ and }} is processed by the template engine as a variable to be inserted into the page eg. {{ headline }}.

If a variable contains a deeper structure, like a dictionary, it can be accessed by dot syntax like so
{{ product.price }}.

A value can also be a expression such as {{ 100 - product.price / product.list_price * 100}}.

<h1>{{ headline }}</h1>

<div class="price">{{ product.price }}</div>

<div class="list-price">{{ 100 - product.price / product.list_price * 100}}</div>

If-else statements

Flow control if supported via if-else statements denoted by curly braces and percent signs: {% and %}.

{% if product.on_sale %}
  On Sale
{% endif %}
{% if product.stock_count < 10 %}
  Only few in stock!
{% else %}
  Lots in stock.
{% endif %}

For-loops

Iterating over an array of values is done as follows:

{% for product in products %}
  {{ product.name }}
{% endfor %}

To make looping over a loop easier each loop has an associated loop object only available within the loop body with the following fields:

Name
Value

loop.index

The index of the loop iteration starting from 0.

loop.length

The total length of the loop ie. number of elements in the list there is iterated over.

loop.first

true if this is the first iteration of the loop else false.

loop.last

true if this is the last iteration of the loop else false.

Here is an example of using the loop object to write a comma-separated list of sizes for each product.

{% for size in product.sizes %}
 {{ size }}{% if not loop.last %}, {% endif %}
{% endfor %}
Small, Medium, Large, X-Large

Formatting with Filters

Filters can be used to format values before they are inserted into the page. Filters are applied to a value by using |.

{{ product.price | money }}

Multiple filters can be used by being chained after each other. They will be applied in the order they are listed reading from left to right.

{{ product.price | round | money }}

Clerk.js comes with these built-in filters:

Formatter
Function

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:

Clerk('config', {
  filters: {
    round: function(x) {
      return Math.round(x).toString();
    }
});

Template Language


How to style the results from Clerk.io.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.