Content Rendering

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 return the Content as a finished HTML block to be rendered by the browser.

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

To control rendering, for example for single-page apps, simply change this class to something else, to render results on page changes. Make sure to destroy the Content block and insert it again before rendering if the visitor returns to the page. This is to ensure Clerk.js does not see the block as already rendered.

Clerk.js can be configured to automatically render elements with custom selectors in a session after initialising them once, with auto_init_custom_selectors: true.

Initialization

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

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 in a special way upon initialisation but are all optional:

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

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

<!-- Automatically Initialised -->
<div class="clerk"
     
     data-api="search/search"
     data-template="#clerk-template"
     data-labels='["Search Page"]'
     
     data-query="jedi"
     data-limit="20">
</div>


<!-- Manually Initialised -->
<div id="clerk-content"
     
     data-api="search/search"
     data-template="#clerk-template"
     data-labels='["Search Page"]'
     
     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" id="clerk-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: