Opgelet! 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 er een basis kennis voor HTML, Javascript en CSS nodig.

Over het algemeen werkt de add-to-cart knop van de JS implementatie als volgt. Wanneer de gebruiker op de add-to-cart knop klikt, wordt er een event afgevuurd binnen de JS implementatie.

Het is mogelijk om op dit event in te haken. Dit kan door het configuratie object uit te breiden met de "on" optie. In deze optie is het mogelijk om door middel van een Javascript functie in te haken op verschillende events. In het voorbeeld hier onder zie je hoe er een Javascript functie wordt meegegeven voor het add-to-cart event.

In het geval van een Tweakwise hosted implementatie kan het zijn dat dit configuratie object nog niet op de pagina staat. In dat geval kan er een leeg configuratie object aangemaakt worden met alleen een invulling voor de "on" optie.

Het is aan de klant om deze Javascript functie zo uit te breiden dat het product ook daadwerkelijk in de winkelwagen wordt geplaatst. Omdat elke website anders is kunnen wij dit niet voor de klant doen.

<script>
  window['twn-starter-config'] = {
    // Eventuele andere opties...

    on: {
      'twn.add-to-cart': function (event) {
        var tweakwiseProductId = event.data.itemno;
        // Plaats hier d.m.v Javascript het product in de winkelwagen
      },
    },
  };
</script>