tweakwiseRecommendations

function tweakwiseRecommendations(options: RecommendationsOptions): void

This function is added to the window object once the Recommendations module has finished loading.

The first argument is an object containing options for the recommendations.

RecommendationsOptions

An object with options for the recommendations.

output

output: string

A string with a valid CSS selector leading to an HTML element on the page. This element will be used to display the user interface.

Example

tweakwiseRecommendations({
  // ...
  output: '#recommendations'
});

instancekey

instancekey: string

A string with the instance specific key.

Example

tweakwiseRecommendations({
  // ...
  instancekey: 'abcdefgh'
});

featured

featured?: { id?: string }

An option with options for displaying featured recommendations.

The id is the id of the featured recommendations configured in the Tweakwise App.

Example

tweakwiseRecommendations({
  // ...
  featured: {
    id: '1'
  }
});

related

related?: { productId?: string; groupKey?: string }

An option with options for displaying up- and cross sell recommendations. When configured; the related option will take precedence over the featured option.

The productId is the product article number for which the recommendations should be loaded.

The groupKey is the group key associated with the up- and cross sell recommendations.

Example

tweakwiseRecommendations({
  // ...
  related: {
    productId: '1',
    groupKey: 'group-key'
  }
});

products

products?: { mobile?: number; tablet?: number; desktop?: number; }

An object with options for the amount of products that should be displayed. If the API returns more products than the configured amount; The recommendations will be shown as a carousel.

Example

tweakwiseRecommendations({
  // ...
  products: {
    mobile: 2,
    tablet: 3,
    desktop: 4
  }
});

profileKey

profileKey?: string

A string to provide the personalization profilekey to be used.

parameters

parameters?: string

A string with the hidden filters that should be sent with every request. This is a string containing one or more keys (facet url name) with their corresponding values. Please note that only the filter values should be URL encoded.

Example

tweakwiseRecommendations({
  // ...
  parameters: "brand=Coca%20Cola%7CPepsi"
});

parametersExcept

parametersExcept?: string

A string with the hidden exclusion filters that should be sent with every request, meaning matching products will be excluded from the response. This is a string containing one or more keys (facet url name) with their corresponding values. Please note that only the filter values should be URL encoded.

Example

tweakwiseRecommendations({
  // ...
  parametersExcept: "brand=Coca%20Cola%7CPepsi"
});

currency.symbol

symbol?: string

A string with the currency symbol to be used on product tiles within the module. The default value is the euro sign €.

Example

tweakwiseRecommendations({
  // ...
  currency: {
    // ...
    symbol: "$"
  }
});

currency.symbolPosition

symbolPosition?: 'left' | 'right'

Some currencies usually display the symbol on the left of the price, others on the right. With this configuration you may choose its position. Default value is left.

Example

tweakwiseRecommendations({
  // ...
  currency: {
    // ...
    symbolPosition: "right"
  }
});

sourceName

sourceName?: string

Override the source added to each request's header (TWN-Source) for traffic categorization. Defaults to Tweakwise Javascript Recommendations.

Example

tweakwiseRecommendations({
  // ...
  sourceName: 'www.example-shop.com - Tweakwise JS Recommendations'
});

on

on?: { [key: string]: Function }

A dictionary containing event handlers for different events in the Recommendations JS. The key is the name of the event. The value is the event handler in the form of a JavaScript function.

The on option currently supports the following events:

Example

tweakwiseRecommendations({
  // ...
  on: {
    // ...
    'twn.add-to-cart': function (event) {
    	// ...
    }
  }
});

starterProductTile

starterProductTile?: boolean

The starter product tile option determines whether the layout and styling of the JS Implementation should be used within the Recommendations JS. This option is enabled by default.

Example

tweakwiseRecommendations({
  // ...
  starterProductTile: true
});