EnglishOpgelet! 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>