EnglishOpgelet! We hebben een nieuwe documentatiesite en dit artikel is herschreven.
Bekijk de laatste versie van dit artikel →
Om de stappen te volgen zoals beschreven in dit artikel is een basiskennis van HTML, Javascript en CSS vereist.
Er zijn twee manieren waarop je Tweakwise kunt gebruiken met Javascript:
- Met een Javascript bestand gehost door Tweakwise (standaard)
- Met een zelf gehost Javascript (en CSS) bestand
In dit artikel wordt de tweede mogelijkheid uitgelegd.
Standard Site Search
Het implementeren met behulp van een zelf gehost Javascript (en CSS) bestand vergt meer inspanning dan de eerste optie. Maar het geeft je wel volledige controle over alle beschikbare opties en de manier waarop de resultaten worden weergegeven. Om Tweakwise Standard Site Search op deze manier met Javascript te implementeren, volg je de onderstaande stappen:
Stap 1: Installatie
Het script kan worden geïnstalleerd door het op te nemen in de HTML van je site:
<html>
<head>
<!-- ... -->
<script>
window.tweakwiseFailover = function (src) {
var script = document.createElement('script');
script.async = true;
script.src = src;
document.head.appendChild(script);
};
</script>
<link
rel="preload"
href="https://gateway.tweakwisenavigator.net/js/starter.js"
as="script"
data-failover-src="https://gateway.tweakwisenavigator.com/js/starter.js"
onerror="tweakwiseFailover(this.dataset.failoverSrc);"
/>
<script src="https://gateway.tweakwisenavigator.net/js/starter.js"></script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
Voor optimale prestaties raden wij aan om het Javascript zo vroeg mogelijk op de pagina te laden. Het script gebruikt het "DOMContentLoaded" event om de instellingen op te halen en de resultaten op de pagina te tonen. Het laden van de Javascript na het 'DOMContentLoaded' event zal een nadelig effect hebben op de performance van het script. Voor meer informatie over het "DOMContentLoaded" event volg deze link.
Stap 2: Configuratie
Behalve het script zelf, is er slechts een zeer minimale configuratie die moet worden gedaan om de implementatie werkend te krijgen. Hiervoor hoef je alleen de instance key toe te voegen aan een stukje Javascript. Je kunt deze sleutel vinden in de module Connectivity > Endpoints in Tweakwise.
<script>
window['twn-starter-config'] = {
instancekey: 'INSTANCEKEY',
};
</script>
Nu kan de rest van de implementatie geconfigureerd worden in de JS implementatie module in Tweakwise. Selecteer in ieder geval de input en output elementen met een geldige CSS selector.
Zorg ervoor dat het uitvoerelement alle inhoud van de pagina bevat die verborgen moet worden wanneer de zoekresultaten worden getoond. Dit komt omdat de zoekresultatencontainer fungeert als een tijdelijke overlay van de inhoud van de pagina. De gebruiker kan de overlay weer sluiten en de originele pagina-inhoud bekijken.
Het is mogelijk om de configuratie van de JS implementatie module te overschrijven door extra opties toe te voegen aan de initiële Javascript configuratie.
Sommige opties zijn alleen beschikbaar als je ze op deze manier implementeert en kunnen niet worden geactiveerd in de JS-implementatiemodule.
Lees dit artikel voor een overzicht van alle beschikbare opties.
Stap 3: Styling (optioneel)
Het is mogelijk om het standaardthema van de implementatie aan te passen door een aangepast stylesheet toe te voegen. Hiermee kun je bijvoorbeeld de lettertypes en kleuren van de implementatie aanpassen. Deze stylesheet moet door jullie worden gehost en kan worden toegevoegd aan de pagina.
<link rel=”stylesheet” href=”https://your-domain.com/custom-stylesheet.css” />
Medium Merchandising
Als je Tweakwise Standard Site Search hebt geïmplementeerd met behulp van een zelf gehost Javascript (en CSS) bestand kun je je implementatie snel naar Medium Merchandising tillen.
Het enige wat je hoeft te doen is je bestaande configuratie uitbreiden om het script te voorzien van een geldig Tweakwise category ID. Hierdoor wordt de Tweakwise product lister pagina geactiveerd. Dit categorie ID is per pagina verschillend en kan leeg zijn op pagina's waar je de product lister pagina niet wilt gebruiken. Dit is bijvoorbeeld handig op de homepagina.
Het onderstaande fragment laat zien hoe je het Tweakwise script kunt voorzien van een categorie ID.
<script>
window['twn-starter-config'] = {
instancekey: 'INSTANCEKEY',
navigation: {
cid: 'CATEGORYID',
},
};
</script>
Verander de output (optioneel)
Het is ook mogelijk om een andere output container te gebruiken voor de product lister pagina dan voor de zoekresultaten. Hiervoor hoef je alleen maar een ander HTML-element in de optie navigation.output te selecteren met een geldige CSS-selector. Als je een HTML-element hebt geselecteerd, wordt dit gebruikt als uitvoer voor de productoverzichtpagina. De standaard uitvoeroptie wordt nog steeds gebruikt voor de zoekresultaten.
<script>
window['twn-starter-config'] = {
instancekey: 'INSTANCEKEY',
output: 'OUTPUT FOR SEARCH RESULTS',
navigation: {
cid: 'CATEGORYID',
output: 'OUTPUT FOR PLP',
},
};
</script>
Filter voorselectie (optioneel)
Het is ook mogelijk om een voorselectie van filters toe te voegen aan de productlijst pagina door gebruik te maken van de navigation.filters optie. Deze optie zal deze filters toepassen bij het initieel ophalen van de pagina.
<script>
window['twn-starter-config'] = {
instancekey: 'INSTANCEKEY',
navigation: {
cid: 'CATEGORYID',
filters: {
tn_fk_color: 'Blue',
},
},
};
</script>
In het bovenstaande voorbeeld is de kleur met waarde "Blauw" voorgeselecteerd.