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

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

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