Heads up! We have a new documentation site and this article has been rewritten.
Check out the latest version of this article →
The table below shows an overview of all options available in the Javascript for the configurations of the implementation.
KEY |
DESCRIPTION |
STANDARD |
MANDATORY |
ONLY IN JS |
instancekey |
Authorization key for shop |
|
X |
X |
input |
List of IDs (or query selectors) of the input element |
|
X |
|
output |
ID (or quey selectors of the output element |
|
X |
|
lang |
Language of the user interface (‘nl’, ‘en’, ‘de’, ‘fr’, ‘it’ of ‘es’) |
‘nl’ |
|
|
cid |
Root category ID of the search results |
|
|
|
parameters | A string of hidden filters that will be sent with every request | |||
products |
Object with information on the product grid |
|
|
|
products.mobile |
Width of product grid on mobile |
2 |
|
|
products.tablet |
Width of product grid on tablet |
3 |
|
|
products.desktop |
Width of product grid on desktop |
4 |
|
|
analytics |
Object with information on the Google Analytics implementation |
|
|
|
analytics.type |
Google Analytics implementation type (‘gtm’ or ‘ga’) |
|
|
|
analytics.args |
Google Tag Manager data layer |
window.dataLayer |
|
|
ui |
Object with information on the user interface |
|
|
|
ui.addToCartButton |
Enable or disable the 'In shopping cart' button in the default product card |
false |
|
|
ui.addToFavoritesButton | Toggle for showing the 'Add to favorites' button in the default product card | false | X | |
ui.colorSwatches | Only show swatches in color filter | false | X | |
ui.scrollToTopOnFilter |
Toggle for scrolling to top after (de)selecting a filter |
false | X | |
ui.scrollToTopOnPagination | Toggle for scrolling to top after navigation to another page | true | X | |
ui.sliderInputFields |
Enable or disable input fields of a range filter |
false |
|
X |
navigation |
Object with information on the ‘navigation’ functionality |
|
|
X |
navigation.output | ID (or query selector) of the alternative output element for the 'navigation' functionality | X | ||
navigation.cid |
Root category ID of the navigation functionality |
|
|
X |
navigation.parameters | A string containing the hidden filters sent with every navigation request (this option overrides the default hidden filters) | |||
navigation.filters |
Object with a visible preselection of filters for navigation (key is the attribute, value is the selection) |
|
|
X |
currency | An object containig product currency information | X | ||
currency.symbol | A string containing the currency symbol | '€' | X | |
on |
Object with functions that are executed after various events (key is event type, value is a function) |
|
|
X |
endpointBaseUrl |
Tweakwise API endpoint |
‘https://navigator-group1.tweakwise.com/’ |
|
X |
mount |
Element ID for VueJS mount |
‘twn-starter-mount’ |
|
X |
skipApiConfig | Toggle for skipping the api call to fetch the configuration set in the 'JS Implementation' module | false | X | |
debug | Toggle for console logging errors | false | X |
The table below contains an overview of all possible events of the 'on' function.
KEY |
DESCRIPTION |
'twn.init.started' |
Request for the retrieval of configuration was started |
'twn.init.success' |
Request for the retrieval of configuration was successful |
'twn.init.failed' |
Request for the retrieval of configuration failed |
'twn.init.completed' |
Request for the retrieval of configuration finished |
'twn.search.started' |
Change of value detected in one of the input elements |
'twn.request.started' |
Request for the retrieval of search results was started |
'twn.request.success' |
Request for the retrieval of search results was successful |
'twn.request.failed' |
Request for the retrieval of search results failed |
'twn.request.completed' |
Request for the retrieval of search results finished |
'twn.request.navigation.started' |
Request for the retrieval of navigation results was started |
'twn.request.navigation.success' |
Request for the retrieval of navigation results successful |
'twn.request.navigation.failed' |
Request for the retrieval of navigation results failed |
'twn.request.navigation.completed' |
Request for the retrieval of navigation results finished |
'twn.container.opening' |
Search results container is being opened |
'twn.container.opened' |
Search results container was opened |
'twn.container.closing' |
Search results container is being closed |
'twn.container.closed' |
Search results container was closed |
'twn.container.navigation.opening' |
Navigation results container is being opened |
'twn.container.navigation.opened' |
Navigation results container was opened |
'twn.container.navigation.closing' |
Navigation results container is being closed |
'twn.container.navigation.closed' |
Navigation results container was closed |
'twn.add-to-cart' |
'In shopping cart' button was clicked |
'twn.selection.change' | Selection in search hash changed |
'twn.selection.navigation.change' | Selection in navigation hash changed |
An example of the configuration in Javascript with all options filled in:
<script type=”text/javascript"> window[“twn-starter-config”] = { instancekey: “INSTANCEKEY”, input: [“Tweakwise-input”, “Tweakwise-input-2”], output: “Tweakwise-output”, lang: “nl”, cid: “1”, parameters: 'brand=Coca Cola&brand=Pepsi', products: { mobile: 2, tablet: 3, desktop: 4 }, analytics: { type: “gtm”, args: window.dataLayer, }, ui: { addToCartButton: true, addToFavoritesButton: true, colorSwatches:: true, scrollToTopOnFilter: true, scrollToTopOnPagination: true, sliderInputFields: true, }, navigation: { output: “tweakwise-output-alt”, cid: “1”, parameters: 'brand=coca cola&brand=pepsi', filters: { tn_fk_kleur: “Blauw” } }, currency: { symbol: '€' }, on: { “twn.init.started”: function() { // Do something here... } }, endpointBaseUrl: “https://navigator-group1.tweakwise.com/”, mount: “twn-starter-mount”, skipApiConfig: true, debug: true }; </script>