Website 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>

Logical Operators with Is

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>

Rendering HTML attributes

If you want to display an attribute that contains HTML, and make sure the browser renders it, you simply need to use triple brackets around the attribute:

{{{ my_html_attribute }}}

By using this method, an attribute like this:

my_html_attribute = "<b>Best <i>Price</i></b>"

will be rendered like this in the frontend:

Best Price

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 difference in percentage between two numbers. Usage: `{{ 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 }}` Can also be configured for custom price-formatting with this syntax: `{{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();
}