Opgelet! We hebben een nieuwe documentatiesite en dit artikel is herschreven.
Bekijk de laatste versie van dit artikel →
In de onderstaande tabel is een overzicht te zien van alle beschikbare opties in de Javascript voor het configureren van de implementatie.
KEY |
BESCHRIJVING |
STANDAARD |
VERPLICHT |
ALLEEN IN JS |
instancekey |
Authorisatie key voor shop |
|
X |
X |
input |
Lijst met ID’s (of query selectors) van de input elementen |
|
X |
|
output |
ID (of query selector) van het output element |
|
X |
|
lang |
Taal van de gebruikersinterface (‘nl’, ‘en’, ‘de’, ‘fr’, ‘it’ of ‘es’) |
‘nl’ |
|
|
cid |
Root categorie ID van de zoekresultaten |
|
|
|
parameters | Een tekst met een selectie van verborgen filters die met elk request wordt meegestuurd |
|||
products |
Object met informatie over het producten grid |
|
|
|
products.mobile |
Breedte van producten grid op mobiel |
2 |
|
|
products.tablet |
Breedte van producten grid op tablet |
3 |
|
|
products.desktop |
Breedte van producten grid op desktop |
4 |
|
|
analytics |
Object met informatie over de Google Analytics implementatie |
|
|
|
analytics.type |
Google Analytics implementatie type (‘gtm’ of ‘ga’) |
|
|
|
analytics.args |
Google Tag Manager datalayer |
window.dataLayer |
|
|
ui |
Object met informatie over de gebruikersinterface |
|
|
|
ui.addToCartButton |
Aan of uit zetten van de “In winkelwagen” knop in het standaard product kaartje |
false |
|
|
ui.addToFavoritesButton | Aan of uit zetten van de "Toevoegen aan favorieten" knop in het standaard product kaartje | false | X | |
ui.colorSwatches | Alleen tonen van stalen in kleurfilter | false | X | |
ui.scrollToTopOnFilter |
Aan of uit zetten van het automatisch scrollen naar boven na het selecteren van een filter |
false | X | |
ui.scrollToTopOnPagination | Aan of uit zetten van het automatisch scrollen naar boven na het pagineren | true | X | |
ui.sliderInputFields |
Aan of uit zetten van de invoervelden van een range filter |
false |
|
X |
navigation |
Object met informatie over de ‘navigatie’ functionaliteit |
|
|
X |
navigation.output | ID (of query selector) van het alternatieve output element voor de 'navigatie' functionaliteit | X | ||
navigation.cid |
Root categorie ID van de navigatie resultaten |
|
|
X |
navigation.parameters | Tekstuele waarde die de verborgen filters bevat die met elk navigatie request worden meegetuurd (deze optie overschijft de standaard optie voor verborgen filters) | |||
navigation.filters |
Object met een zichtbare voorselectie van filters voor de navigatie (key is het attribuut, value is de selectie) |
|
|
X |
currency | Object met informatie over de valuta | X | ||
currency.symbol | Tekstuele waarde van het valuta symbool | '€' | X | |
on |
Object met functies die worden uitgevoerd n.a.v verschillende events (key is event type, value is een functie) |
|
|
X |
endpointBaseUrl |
Tweakwise API endpoint |
‘https://navigator-group1.tweakwise.com/’ |
|
X |
mount |
Element ID voor VueJS mount |
‘twn-starter-mount’ |
|
X |
skipApiConfig | Aan of uit zetten van het ophalen van de configuratie uit de 'JS Implementatie' module in de Tweakwise app | false | X | |
debug | Aan of uit zetten van het tonen van console foutmeldingen | false | X |
In onderstaande tabel is een overzicht te vinden van alle mogelijke events van de ‘on’ functie.
KEY |
OMSCHRIJVING |
'twn.init.started' |
Request voor het ophalen van configuratie gestart |
'twn.init.success' |
Request voor het ophalen van configuratie is succesvol |
'twn.init.failed' |
Request voor het ophalen van configuratie is mislukt |
'twn.init.completed' |
Request voor het ophalen van configuratie afgerond |
'twn.search.started' |
Verandering van waarde van een van de input elementen gedetecteerd |
'twn.request.started' |
Request voor het ophalen van zoekresultaten gestart |
'twn.request.success' |
Request voor het ophalen van zoekresultaten is succesvol |
'twn.request.failed' |
Request voor het ophalen van zoekresultaten is mislukt |
'twn.request.completed' |
Request voor het ophalen van zoekresultaten afgerond |
'twn.request.navigation.started' |
Request voor het ophalen van navigatie resultaten gestart |
'twn.request.navigation.success' |
Request voor het ophalen van navigatie resultaten is succesvol |
'twn.request.navigation.failed' |
Request voor het ophalen van navigatie resultaten is mislukt |
'twn.request.navigation.completed' |
Request voor het ophalen van navigatie resultaten afgerond |
'twn.container.opening' |
Zoekresultaten container wordt geopend |
'twn.container.opened' |
Zoekresultaten container is geopend |
'twn.container.closing' |
Zoekresultaten container wordt gesloten |
'twn.container.closed' |
Zoekresultaten container is gesloten |
'twn.container.navigation.opening' |
Navigatie resultaten container wordt geopend |
'twn.container.navigation.opened' |
Navigatie resultaten container is geopend |
'twn.container.navigation.closing' |
Navigatie resultaten container wordt gesloten |
'twn.container.navigation.closed' |
Navigatie resultaten container is gesloten |
'twn.add-to-cart' |
“In winkelwagen” knop is aangeklikt |
'twn.selection.change' | Selectie in search hash is veranderd |
'twn.selection.navigation.change' | Selectie in navigation hash is veranderd |
Een voorbeeld van de configuratie in de Javascript met alle opties ingevuld ziet er als volgt uit:
<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-navigation”, cid: “1”, parameters: 'brand=coca cola&brand=pepsi', filters: { tn_fk_color: “Blue” } }, currency: { symbol: '€' }, on: { “twn.init.started”: function() { // Doe hier iets... } }, endpointBaseUrl: “https://navigator-group1.tweakwise.com/”, mount: “twn-starter-mount”, skipApiConfig: true, debug: true }; </script>