The Clerk.io Developer Hub

Welcome to the Clerk.io developer hub. You'll find comprehensive guides and documentation to help you start working with Clerk.io as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Website Template Language

Syntax for the Clerk.js template language.

Clerk.js uses Handlebars as its template engine.

Here is a simple example of a template:

<a href="{{ url }}">
  <h2>{{ name }}</h2>
  <img src="{{ image }}" alt="{{ name }}" />
  <div class="price">{{ money price }}</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 template language supports the use of If/Else statements, to only show specific content based on whether a specific variable exists, or has the value True.

The syntax is:
{{#if variable_name}}
Do something
{{else}}
Do something else
{{/if}}

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}}
  	<div class="old-price"><s>{{ money list_price }}</s></div>
    <div class="special-price">{{ money price }}</div>
  {{else}}
    <div class="price">{{ money price }}</div> 
  {{/if}}
  <button>Buy Now</button>
</a>

If you need more advanced logic, like checking if a price is above a certain limit, or if an attribute has a given value, you can use the {{#is}} functionality.
Use this to compare variables to values or other attributes, with standard logical operators.

The syntax is:
{{#is variable_name 'operator' value/variable_name}}
Do something
{{else}}
Do something else
{{/is}}

An example:

<a href="{{ url }}">
  {{#is brand '!=' 'Original-Brand'}}
    <div class="special-text">3rd Party Brand</div>
  {{else}}
    <div class="normal-text">Original-Brand</div> 
  {{/is}}
  
  <h2>{{ name }}</h2>
  <img src="{{ image }}" alt="{{ name }}" />
  
  {{#is list_price '>' price}}
    <div class="old-price"><s>{{ money list_price }}<s></div>
    <div class="special-price">{{ money price }}</div>
  {{else}}
    <div class="price">{{ money price }}</div> 
  {{/is}}
  
  <button>Buy Now</button>
</a>

Iterating over an array

Handlebars support iterating over an array of values, with the {{#each}} helper. The helper will individually loop the values in the array, and print each one to the placement of {{this}}.

An example:

<a href="{{ url }}">
  <h2>{{ name }}</h2> 
  
  {{#if variants}}
  <ul class="product-variants">
    {{#each variants}}
      <li>{{this}}</li>
    {{/each}}
  </ul>
  {{/if}}
  
  <img src="{{ image }}" alt="{{ name }}" />
  <div class="price">{{ money price }}</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 {{ format variable }}.

Clerk.js comes with these built-in formatters:

Formatter
Function

round

Rounds to the nearest integer, like so {{ round x }}.

pct

Gives you the percentage of two numbers, like so {{ pct x 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: {{ money price 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: {{ money_eu price 2 }}

nth

Returns a value from a list (x), based on the index given (y), like so {{ nth x y }}

min

Returns the lowest value from a list

max

Returns the highest value from a list

You can add you own formatter functions in the Clerk.js Configuration.

A formatter function takes one or more arguments and returns a string or number to be printed. Here is an example of the round formatter:

function(x) {
  return Math.round(x).toString();
}

Website Template Language

Syntax for the Clerk.js template language.