Wishlist API

We trigger a JS event when the module script runs and also when the widget initializes and after every submit action (add or remove). So if you want to modify an object you just need to listen to the event and modify it.

These are our 3 events:

• frcp.wishlist.initialize
• frcp.wishlist.installed
• frcp.wishlist.update { data: data }

Here's an example:

document.addEventListener("frcp.wishlist.installed", function (event) {
 if (window.matchMedia("(max-width: 640px)").matches) {
       const wishlistButton = document.querySelector('.frcp-wishlist-wrapper');
       const appendElement = document.querySelector('.product-form--quantity');
       appendElement.append(wishlistButton)
  } 
})

For our Wishlist Collection Button, and in the case the products are rendered after the page loads, the next script can be used to reload the widget:

• frcp.wishlist.attachOnCollection();

Here's an example:

document.addEventListener('recommended_products:loaded', function() {
 frcp.wishlist.attachOnCollection();
});

Updated on: 13/08/2026