In Tweakwise JS, an add-to-favorites button can be added to the product tile. This button will not automagically add the product to the wishlist: Tweakwise JS will trigger an event which can be used to implement this behavior.

Plugin Studio

Add a Button element to your tile, for example put a heart emoji as text or use an SVG as icon:

Next, configure the Add to favorites event on the element, using the Click event panel:

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

Notes:

• If you want to use an SVG icon, convert the svg to base64 and use it in the stylesheet.

Adding/removing

Use the twn.add-to-favorites hook to actually add the product to your wishlist/favorites:

<script>
  window["twn-starter-config"] = window["twn-starter-config"] || {};
  window["twn-starter-config"].on = {
    // ...
    "twn.add-to-favorites": function (event) {
      var productId = event.data.itemno;

      // use productId to add the product to the wishlist
			// e.g. use a (fictional) wishlist endpoint
			fetch('/wishlist/add', { method: 'POST', body: JSON.stringify({ id: productId }) });

    }
  };
</script>

The function body can be implemented as desired/required to add the selected product to the wishlist.

Notes:

• the snippet is an inspirational example and will differ depending on your wishlist implementation.
• the snippet is an example on how to overwrite Tweakwise JS configuration in your frontend. If you have more event hooks, make sure all existing are still working correctly.

State

Part of properly implementing a favorites button is keeping track of what your users liked. In the previous code snippet you have hooked up your service to add a product to the wishlist for a particular user and now it is time to reflect this state in the appearance of the button every time a lister page is loaded.

Follow these steps to show the correct state on a product tile:

• Get the active wishlist contents
• Find the corresponding product tile (if available)
• Add an active state to the product, e.g. add a is-favorite class
• In Studio, make sure the tile adapts to the active state, for example show/hide respective icons corresponding to the state.

<script>
  function tw__applyWishlist(products){
    
		// fetch product IDs added to the wishlist, either inject serverside or clientside.
    var addedProducts = ...

    for (var product of products) {

      // Check if added to a wishlist
      if (!addedProducts.includes(product.itemno)) return;

      var element = document.querySelector('[data-item-id="' + product.itemno + '"]');
      if (!element) return;

      element.classList.add('is-favorite');
    } 

  }

  window["twn-starter-config"] = {
    // Potential other options...
    on: {
      "twn.request.success": function (event) {
        tw__applyWishlist(event.data.groups || event.data.items);
      },
      "twn.request.navigation.success": function (event) {
        tw__applyWishlist(event.data.groups || event.data.items);
      }
    }
  };
</script>

Notes:

• the above snippet is just an example and will differ depending on your wishlist implementation.