Hi ! h_title
Support
Home
Developers
Javascript implementatie
Javascript implementatie

Om de stappen te volgen zoals beschreven in dit artikel is een basiskennis van HTML, Javascript en CSS vereist.

Er zijn twee manieren om Tweakwise te gebruiken met Javascript:

  1. Met een Javascript bestand gehost door Tweakwise (standaard)
  2. Met een zelf gehost Javascript (en CSS) bestand

Dit artikel legt de eerste optie uit.

Klik hier voor een live demo

Standard Site Search

Implementeren met een Javascript bestand gehost door Tweakwise is de makkelijkste (en standaard) manier om te implementeren. Wij voorzien je van een unieke URL die leidt naar een Javascript bestand dat alles bevat wat je nodig hebt. Je hoeft het alleen maar 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" />
<link
  rel="preload"

href="https://gateway.tweakwisenavigator.net/js/{{instancekey}}/tweakwise.js"
as="script"
data-failover
-src="https://gateway.tweakwisenavigator.com/js/{{instancekey}}/tweakwise.js"
onerror="tweakwiseFailover(this.dataset.failoverSrc);"
/>
<script
src="https://gateway.tweakwisenavigator.net/js/{{instancekey}}/tweakwise.js">
</script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>

Standaard zoekt het script naar een HTML-invoerelement met een ID-attribuut "tweakwise-input". Zodra de gebruiker begint te typen, zoekt het naar een HTML-element met een ID-attribuut "tweakwise-output" om de resultaten in te plaatsen. Als het script deze niet kan vinden, moet je deze ID's waarschijnlijk nog aan de juiste HTML-elementen toewijzen.

Als je input- of outputelement al een bestaand ID-attribuut heeft, is het mogelijk om het script zo aan te passen dat hij in plaats daarvan naar dat ID zoekt.

Als het om wat voor reden dan ook niet mogelijk is om de juiste HTML-elementen te vinden met behulp van ID-attributen, is het ook mogelijk om het script zo aan te passen dat het een andere methode gebruikt. Bijvoorbeeld met behulp van een data-attribuut.

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.

Als er iets is dat je graag veranderd zou zien in je implementatie, neem dan contact op met Tweakwise.

Medium Merchandising

Als je Tweakwise level Standard hebt geïmplementeerd met behulp van een Javascript-bestand dat door Tweakwise wordt gehost, kun je je implementatie snel naar Medium Merchandising tillen.

Op elke pagina waar je de product lister pagina wilt laden, moet je het script voorzien van de corresponderende categorie ID. Deze 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 home pagina.

Het onderstaande fragment laat zien hoe je het Tweakwise script kunt voorzien van een categorie ID.

<script>
window.tweakwiseNavigationCid = 'CATEGORYID';
</script>

Het is mogelijk om een andere output container te gebruiken voor de product lister pagina's dan voor de zoekresultaten. Als je dit of iets anders veranderd wilt hebben, neem dan contact op met Tweakwise.


Kom je er na het lezen van de relevante artikelen nog steeds niet uit?

Deel artikel

Link gekopieerd naar klembord

Cookies

Wij gebruiken cookies om het gebruik van de Support omgeving te analyseren.

Meer weten? Bekijk onze cookieverklaring.

Sluit melding