Data Management

Using Events to Manipulate Product Data in the Frontend

This allows you to change names, prices, links etc. based on frontend logic

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

Events are Javascript functions that are run before or after 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>

  function logProducts(data) {

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

The most important part of the response is product_data which contains each attribute of the products that 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;

In this example, the price is first divided by 2 and then assigned to the 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.