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.

Otherwise additional initial parameters can be provided through the JavaScript API as an extra argument Clerk('content', '#clerk-search', {query: 'lightsaber', limit: 60});.

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 %}
  
  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Load More Results</a>
</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 content
  consle.log('Clerk.io Content', content.id, content.element);
  
  // log the current search query
  console.log('Clerk.io Search Param', content.param('query'));
  
  // update the search param
  content.param('query', 'new search query');
  
  // load 20 extra search products
  content.more(20);
});

Each content have the following JavaScript interface:

Method
Functionality

more

Load more results.

content.more(42) will load 42 additional products into the result.

If no option is given an appropriate number of results between 20 and 100 will be loaded given the current number of the products visible.

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.

id

The ID of the content. This can be used to refer to the content in our JS interface. This value will always also be set as an id attribute in the contents HTML embed element.

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.