> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.froonze.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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:

```javascript
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:

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