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    

Events

Handling Clerk.js events.

Events enable you to hook into the various operations performed by Clerk.js.

Event handlers can be registered by binding a handler function to the event name Clerk('on', event, callback). This will bind the handler to all subsequent occurrences of that event.

An event handler can also be bound to a subset of Clerk.js Contents by adding a CSS selector that refers to only those Clerk('on', event, css_selector, callback).

All event handlers must be a function with the following signature function(content, data) -> bool where content is the content object for the content that triggered the event and data is optional extra data related to the event.

Som events allow handlers to cancel further actions by explicitly returning false.

Events

Trigger

Data

Cancelable

model

Called whenever a change happens in the Content model.

The key, value pairs to be updated.

No

update

Called whenever a Contents model is about to be updated with new data from the API

Yes

response

Called when receiving a response form the API.

The data returned from the API.

Yes

render

Called just before rendering of a Content.

Yes

rendered

Called after rendering of a content. Gives the response used to render the content as an argument.

The full context of data that was used to render the content.

No

live_search_update

Called when a live_search element is about to do an update

The query used for the live search.

Yes

Example code binding en event to rendered, that prints the data.

<!-- Clerk.io content to bind event to -->
<h1>Our Most Popular Products</h1>
<span
  id="popular"
  class="clerk"

  data-api="recommendations/popular"
  data-limit="3">
  <ul class="product-list">
    {% for product in products %}
      <li class="product">
        <h2 class="product-name">{{ product.name }}</h2>
 
        <img src="{{ product.image }}" title="{{ product.name }}" />
 
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>
</span>

<h1>Our Recommendations For You</h1>
<span
  id="personal"
  class="clerk"

  data-api="recommendations/visitor/complementary"
  data-limit="3">
  <ul class="product-list">
    {% for product in products %}
      <li class="product">
        <h2 class="product-name">{{ product.name }}</h2>
 
        <img src="{{ product.image }}" title="{{ product.name }}" />
 
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>
</span>

<!-- Bind the different event handlers -->
<script type="text/javascript">
  // handle all rendered events
  Clerk('on', 'rendered', function(content, data) {
    console.log('Clerk.io content rendered with', data);
  });
  
  // handle rendered events but only for popular products
  Clerk('on', 'rendered', '#popular', function(content, data) {
    console.log('Clerk.io content rendered with', data);
  });
</script>

Updated about a year ago

Events


Handling Clerk.js events.

Suggested Edits are limited on API Reference Pages

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