tweakwiseSuggestions
function tweakwiseSuggestions(options: SuggestionsOptions): void
This function is added to the window
object once the Suggestions module has finished loading.
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"
}
});
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
});
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:
Key | Description |
---|---|
twn.suggestions.container.open | Suggestions container was opened |
twn.suggestions.container.close | Suggestions container was closed |
twn.request.started | Request to fetch suggestions has started |
twn.request.products.started | Request to fetch product suggestions has started |
twn.request.success | Request to fetch suggestions has succeeded |
twn.request.products.success | Request to fetch product suggestions has succeeded |
twn.request.failed | Request to fetch suggestions has failed |
twn.request.products.failed | Request to fetch product suggestions has failed |
twn.request.completed | Request to fetch suggestion has been completed |
twn.request.products.completed | Request to fetch product suggestions has been completed |
twn.product.visible | Product Suggestion tile is visible on the screen |
twn.product.click | A link on a Product Suggestion tile has been clicked |
Example
tweakwiseSuggestions({
// ...
on: {
// ...
'twn.suggestions.container.open': function () {
console.log('container was opened');
}
}
});