Realtime pricing

In case you want to display realtime pricing or customer specific pricing, you can make that happen using the twn.request.success hook.

Before you start:

Make sure you have an API or endpoint where the prices can be retrieved.
Make sure you marked an element in your product tile for the price to show.

In this example:

there is a API POST method available that expects a list of product ids.
the price is already on the tile, but can be overwritten

interface RequestSuccessEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiNavigation;
}

const formatter = new Intl.NumberFormat("nl-NL", {
  style: "currency",
  currency: "EUR"
});

window["twn-starter-config"].on = {
  // ...
  'twn.request.success': function (event: RequestSuccessEvent) {
  	
    // gather all product ids, note: these are id's known in tweakwise
    const productids = event.data.items.map(o => o.itemno);
    
    // fetch the pricing, batched
    fetch('http://api.yourshop.com/pricing/', {
      method: 'POST', 
      body: JSON.stringify(productids) 
    }).then(function(result: { itemno: string; price: number; }[]){
      
      // for every result, find the correct tile and overwrite the price
      result.forEach(function(item){
        // the price is formatted using build-in 
        var element = document.querySelector('[data-item-id="#twn-' + itemno + '"] [data-property="price"]');
        if(element){
        	element.innerHTML = formatter.format(price);
        }
      });
      
    });
    
  }
});

Good to know

It is recommended to batch pricing calls for performance reasons.