Content Rendering
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 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.
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:
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 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:
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. |
Updated about 1 month ago