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

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 Content 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-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:

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.