tweakwiseSuggestions

function tweakwiseSuggestions(options: SuggestionsOptions): void

This function is added to the window object once the plugin has finished loading. This function is available after the DOMContentLoaded event.

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

SuggestionsOptions

An object with options for the suggestions.

input

input: string

A string with a valid CSS selector leading to an existing search input on the page.

Example

tweakwiseSuggestions({
  input: '#search'
});

instancekey

instancekey: string

A string with the instance specific key.

Example

tweakwiseSuggestions({
  instancekey: 'abcdefgh'
});

cid

cid: string

A string with the root category id of the search results.

Example

tweakwiseSuggestions({
  cid: "1"
});

lang

lang?: string

A string with the language to be used for search algorithms. All available languages can be retrieved with the catalog call: /catalog/languages/{instancekey} .

Example

tweakwiseSuggestions({
  // ...
  lang: "en"
});

keyboard

keyboard?: string

A string with the keyboard to be used for search algorithms. All available options are: 'qwerty', 'azerty' or 'qwertz'.

Example

tweakwiseSuggestions({
  // ...
  keyboard: "qwerty" // or "azerty" or "qwertz"
});

layout

layout?: string[]

An array containing the order in which the different types of suggestions should be shown.

Example

tweakwiseSuggestions({
  layout: [
    "SearchPhrase",
    "Category",
    "FacetFilter",
    "Product"
  ]
});

latency

latency?: number

Latency between requests while typing a query (in miliseconds). Default value is 250 ms.

Example

tweakwiseSuggestions({
  latency: 500
});

searchPhrases.categoryKey

categoryKey?: string

A string containing the query string key that should be used to pass the category id in the URL.

Example

tweakwiseSuggestions({
  searchPhrases: {
    categoryKey: "tn_cid"
  }
});

searchPhrases.handle

handle?: (event: { data: Suggestion }) => void

A function overriding the default behavior of what happens when you click on a search phrase suggestion.

Example

tweakwiseSuggestions({
  searchPhrases: {
    handle: function (event) {
      var suggestion = even.data;
      
      // Override default behavior here...
    }
  }
});

categories.handle

handle?: (event: { data: Suggestion }) => void

A function containing the logic of what should happen when you click on a category suggestion.

Example

tweakwiseSuggestions({
  categories: {
    handle: function (event) {
      var suggestion = even.data;
      
      // Override default behavior here...
    }
  }
});

facetFilters.handle

handle?: (event: { data: Suggestion }) => void

A function containing the logic of what should happen when you click on a facet suggestion.

Example

tweakwiseSuggestions({
  facetFilters: {
    handle: function (event) {
      var suggestion = even.data;
      
      // Override default behavior here...
    }
  }
});

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

tweakwiseSuggestions({
  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

tweakwiseSuggestions({
  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

tweakwiseSuggestions({
  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

tweakwiseSuggestions({
  currency: {
    symbolPosition: "right"
  }
});

grouped

grouped?: boolean

With this option set to true a different endpoint will be used for retrieving suggestions returning them grouped by a common group key. For example, you can use this option if you have many product variants with the same group code but only want to show a single product in the results. Defaults to false.

Example

tweakwiseSuggestions({
  // ...
  grouped: true
});

sourceName

sourceName?: string

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

Example

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

on

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

A dictionary with event handlers for different events in the lifecycle of the JS Suggestions. Where the key is the name of the event and the value is a JavaScript function that gets executed when that particular event is triggered.

The table below shows all events that are available to use:

Example

tweakwiseSuggestions({  
  on: {  
    'twn.suggestions.container.open': function () {  
      console.log('container was opened');  
    },  
  },  
  //rest of your options  
});