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.

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

<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
    }
  };
</script>

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

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.

Managing 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.

The common situation is that products that are not added to a wishlist only show an outline of an icon on the button, while added products show an icon that is filled. We solve this by adding both icons at once and make one hidden. It is then up to you to toggle between them by controlling whether a CSS class is-added is present on the button.

The best time to complete this check is when a request to Tweakwise succeeds as you get an access to a list of products displayed on the lister page. To hook into the request succeeds event, we need to add local configuration for the JS Implementation. This can be done by copying the following example snippet into your HTML.

💡

There are two different occasions when to check for products added to a wishlist and therefore two different events to hook to. In navigation lister page use the twn.request.navigation.success event and in the search results lister page use the twn.request.success event.

<script>
  window["twn-starter-config"] = {
    // Potential other options...
    
    on: {
      "twn.request.navigation.success": function (event) {
        var products = event.data.items;
        
        // Using JavaScript code fetch product IDs added to a wishlist
        var addedProducts = ...
        
        // Iterate products
        for (var product of products) {
          
          // Check if added to a wishlist
          if (!addedProducts.includes(product.itemno)) return;
          
          // Query the product tile, 
          // leveraging its unique ID defined by the product's ID (itemno)
          var element = document.getElementById(`twn-${product.itemno}`);
          if (!element) return;

          // Query the favorites button within the product tile
          var collection = element.getElementsByClassName('twn-product-tile__add-to-favorites');
          if (!collection[0]) return;

          // Add `is-added` class name to the element
          collection[0].classList.add('is-added');
        } 
      }
    }
  };
</script>

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

Tile Editor

Add a Button element to your tile, for example put a heart emoji as text:

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.