With the JS Implementation you can choose to place an add-to-favorites button on the product tile. This button will not automatically add the product to the wishlist. Instead, when this button is clicked the JS Implementation will emit an event which can be used to implement the add-to-favorites behavior.

To hook into the add-to-favorites event, we need to add local configuration for the JS Implementation. This can be done by copying the following example snippet into your HTML.

<script>
  window["twn-starter-config"] = {
    // Potential other options...
    
    on: {
      "twn.add-to-favorites": function (event) {
        var productId = event.data.itemno;
        
        // Using JavaScript code add the selected
        // product to the wishlist here
      }
    }
  };
</script>

The only thing that is left is to write your own JavaScript code that will place the selected product in the wishlist.

👍

The snippet above is an example on how to add configuration locally.

For more information on adding configuration locally click here →

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.