Add to cart

In Tweakwise JS, an add-to-cart button can be added to the product tile.

This button will not automagically add the product to the shopping cart: Tweakwise JS will trigger an event that can be used to implement the add-to-cart behavior.

Catching this add-to-cart event can be achieved through event hooks:

<script>
  window["twn-starter-config"] = window["twn-starter-config"] || {};
  window["twn-starter-config"].on = {
    // ...
    "twn.add-to-cart": function (event) {
      var productId = event.data.itemno;        
      // use productId to add the selected product and quantity to the shopping cart
    }
  };
</script>

The function body can be implemented as required to place the selected product in the shopping cart.

Important: the snippet above is an example on how to overwrite Tweakwise JS configuration in your frontend. Read more about available options in our Options reference.

Tile Editor

Add a Button element to your tile:

And configure the Add to cart event on the element, using the Click event panel:

A click/tap on this button will result in the twn.add-to-cart event in the event hooks.

Quantity

Add a quantity input to your tile, configure and style the element as desired:

The quantity will be provided in the add to cart event, hooked on the add to cart button:

<script>
  window["twn-starter-config"] = window["twn-starter-config"] || {};
  window["twn-starter-config"].on = {
    // ...
    "twn.add-to-cart": function (event) {
      var productId = event.data.itemno;
      var quantity = event.data.quantity;
      // use productId to add the selected product and quantity to the shopping cart
    }
  };
</script>

The function body can be implemented as required to place the selected product with the selected quantity in the shopping cart.