Clerk.io Developer Documentation

Welcome to the Clerk.io Developer Documentation.

Here you find our developer documentation for our API and all our SKDs.

Get Started    

Dynamic Content

JavaScript interface for interacting with Clerk.js Content.

Clerk.js Content is any part of a website that is fully controlled by Clerk.js.

Given a Contents parameters and Template Clerk.js will

Initialization

To initiate a HTML element as a Clerk.js Content just call Clerk('content', '#element-id').

By default any HTML with the class clerk wil be initiated as a Conten when Clerk.js is loaded as Clerk.js calls Clerk('content', '.clerk') upon load.

When a Content is initiated the data- variables are read as the Contents initial parameters.

Some parameters are treated special upon initialization but are all optional:

Parameter
Behaviour

data-api

Specifies the API endpoint to use.

data-template

CSS selector for the template to be used (to avoid duplicating templates). If not present, the element body will be used.

If the starting character is @, the template will be loaded from Clerk.io using the remainder of the value as the template id.

data-target

CSS selector for where the products should be rendered. If not present, the products will be added to the DOM where the current element is.

All other parameters will be sent as arguments to the Clerk.io API.

Here is an example of how to initialize a Content automatically and manually.

<!-- Automatically Initialised -->
<div class="clerk"
     
     data-api="search/search"
     data-template="#clerk-template"
     
     data-query="jedi"
     data-limit="20">
</div>


<!-- Manually Initialised -->
<div id="clerk-content"
     
     data-api="search/search"
     data-template="#clerk-template"
     
     data-query="jedi"
     data-limit="20">
</div>

<script type="text/javascript">
  // initialize Clerk.io content via JavaScript.
  Clerk('content', '#clerk-content');
</script>


<!-- Shared template for both contents -->
<script type="text/x-template">
  <h1>Search result for {{ query }}.</h1>
  
  {% for product in products %}
  	<div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product-image }} />
      <a href="{{ product.url }}">Buy Now</a>
    </div>
  {% endfor %}
</script>

Dynamic Changes

Clerk.js provides an easy JavaScript interface for dynamically working with Content.

To access the JavaScript interface for a Content simply provide a callback function to receive the Content interface object.

Clerk('content', '#clerk-search', function(content) {
  // log the current search query
  console.log('Clerk.io Search Param', content.param('query'));
  
  // load 20 extra search products
  var current_limit_param = content.param('limit');
  content.param('limit', current_limit_param + 20);
});

Each content have the following JavaScript interface:

Method
Functionality

param

Setter/getter method to access the Contents parameters.

If used with a single argument it will get the current value var limit = content.param('limit');.

If used with two arguments it will set the parameter and re-render the content content.limit('limit', 42);.

If used with a dictionary it will treat the key-pairs as multiple parameters to be bulk-updated and re-render the content afterward content.param({query: 'Vader', limit: 20});.

element

The HTML Element of the Content container.

Dynamic Content


JavaScript interface for interacting with Clerk.js Content.

Suggested Edits are limited on API Reference Pages

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