If you need to display completely unique prices based on which customer has 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.

Functions can be defined in your source-code and later referenced as a data-before-render 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 that Clerk.io sends back from the API.

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

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

A simple pseudo-code 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 = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
product.price = custom_price;
      }
   }
</script>

where FETCH_PRICE_FROM_SERVER is a javascript function 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 then be displayed in your Design like this:

{{ price }}

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

Did this answer your question?