Introduction

For customer specific pricing there are a couple of routes to choose from.

• Filtering and sorting based on a generic price
• Filtering and sorting based on segmented pricing
• Do not use price-based filtering or sorting

Filtering and sorting based on a generic price

A single price is communicated in the feed, typically a retail price or “starting from” price. These prices are used for sorting and filtering.

In case of sorting on price, this can result in a slight difference because we sort on retail-price, while the customer can have a different price.

The prices on product tiles can be displayed using these prices, or by displaying a "log in to see your price" placeholder.

Do not use price-based filtering or sorting

The easy way out. Many of the B2B companies we serve, choose for this option where price filtering and sorting are omitted due to the complexity involved.

Display of the pricing is still possible, as that is part of the ecommerce platform.

Filtering and sorting based on segmented pricing

Customers are divided into groups, every group gets a dedicated price attribute:

These attributes can be used in dedicated filtertemplates and sort options (or added to a generic filtertemplate, the frontend should filter out the non-relevant attributes).

For every group a dedicated sort option should be created. The platform should target the right dedicated sort option template.

Note: this is a pretty complex setup, which can be a nightmare for maintenance. We recommend keeping this to a maximum of around 5 - 10 segments.

Display on Product Tiles

If you want to display the customer specific price, use the twn.request.success hook:

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"
});

function tw__applyPricing(data: IApiNavigation){
  
  // gather all product ids, note: these are id's known in tweakwise
  const productids = data.items.map(o => o.itemno);

  // fetch the pricing, batched
  fetch('http://api.yourshop.com/pricing/', {
    method: 'POST', 
    body: JSON.stringify(productids) 
  })
    .then(response => response.json())
		.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="' + item.id + '"] [data-property="price"]');
      if(element){
        element.innerHTML = formatter.format(item.price);
      }
    });

  });
  
}

tweakwiseListerPage({
  'twn.request.success': function (event: RequestSuccessEvent) {
  	tw__applyPricing(event.data);
  }
});

Good to know

• It is recommended to batch pricing calls for performance reasons.
• 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.