If you need to display completely unique prices based on which customer has logged in, or need to manipulate other product data based on a frontend setting, then you need to setup an Event in Clerk.io.

Events are Javascript functions that are run before or after Clerk.io renders products.

Functions can be defined in your source-code, and later referenced as an Event like this:

<span class="clerk" data-template="@popular-products" data-before-render="logProducts"></span>

<script>
  function logProducts(data) {
  console.log(data.response.result);
  }
</script>

The function takes the argument data, which is the entire response object that Clerk.io sends back from the API.

The most important part of the response is product_datawhich contains each attribute of the products that Clerk.io sends back:

This data can be manipulated, so the attribute is replaced by, or appended with another value. You can even add new attributes to your Design this way.

An simple example of how to do this, can be seen here:

<span class="clerk" data-template="@popular-products" data-before-render="fetch_customer_price"></span>

<script type="text/javascript">
   function fetch_customer_price (data) {
      for (i = 0; i < data.response.product_data.length; i++) {
         var product = data.response.product_data[i];
         var custom_price = product.price/2;
product.custom_price = custom_price;
      }
   }
</script>

In this example, the price is first divided by 2 and then assigned to the Clerk.io attribute custom_price. This can then be displayed in your Design like this:

{{ custom_price }}

 
Using this method allows you to completely change attributes as needed, while still using our easy-to-use Javascript solution.

Did this answer your question?