Displaying Individual Customer Prices in Clerk.io on Other / Custom Platforms

If you need to display completely unique prices based on which customer is logged in, you need to setup an Event in Clerk.io that inserts the correct price before the products are rendered.

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

This method is possible to use if you can look up prices from your server, directly from a Javascript function, in the frontend based on a product ID and a customer ID.

For showing individual customer prices, the code should run right after the response.

General Example

<span class="clerk" data-template="@home-page-popular"></span>

<script>
  Clerk('on', 'response', function(content, data) {
     console.log(data.result);
  });
</script>

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

Individual Customer Prices Example

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

This data can be manipulated, so standard prices can be r eplaced with customer-specific ones before rendering.

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

<span class="clerk" data-template="@home-page-popular"></span>

<script>
   var customer_id = INSERT_CUSTOMER_ID;
   Clerk('on', 'response', function(content, data) {
      console.log(data.product_data)
      for (i = 0; i < data.product_data.length; i++) {
         var product = data.product_data[i];
         var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
         product.price = custom_price;
      }
   });
</script>

In the code, you need to replace 2 things:

• INSERT_CUSTOMER_ID should be replaced by a code that inserts the ID of the customer currently logged in.

• FETCH_PRICE_FROM_SERVER should be replaced by a Javascript Ajaxfunction that uses the product ID and a customer id to find the correct price.

The price is then assigned to the Clerk.io attribute price which can be displayed in your Design like this:

 {% raw %} {{ price }} {% endraw %}

Using this method allows you to display completely unique prices, while still using our easy-to-use Javascript solution.