NederlandsHeads 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>