JavaScript API

The wishlist API provides several functions, allowing you to:

• Add a product or a variant to the wishlist.
• Remove a product or a variant from the wishlist.
• Check if the wishlist contains a product or a variant.
• Retrieve the contents of the wishlist.

All these functions can be accessed through the variable window.Maestrooo.wishlist  . Here's how to implement the various actions.

Add a product to the wishlist

Use the addProduct()  method to add a product to the customer's wishlist.

window.Maestrooo.wishlist.addProduct(handle, variant_id);

Parameters

• handle  (required): The Shopify product handle.
• variant_id  (optional): The Shopify variant ID. Defaults to null .

The method returns a Promise that resolves when the product has been successfully added and rejects if an error occurs.

Complete example with error handling

async function addToWishlist(handle, variantId = null) {  
  try {    
    await window.Maestrooo.wishlist.addProduct(handle, variantId);
     console.log('Product successfully added to the wishlist');
  } catch (error) {    
     console.error('Unable to add product to wishlist:', error);     
   if (error.message === 'Wishlist item limit reached') {      
     alert('You have reached the maximum number of items allowed in your wishlist.');    
   } else {      
     alert('An error occurred while adding the product. Please try again.');    
   }  
  } 
}  

// Example usage:
addToWishlist('my-product-handle', 123456789);

Handling wishlist limits

When a customer reaches the maximum number of items allowed in their wishlist, the API returns an HTTP 403 Forbidden  response with the following JSON body:

{  "error": "Wishlist item limit reached" }

The addProduct()  Promise is rejected, allowing developers to catch the error and display an appropriate message to the customer.

Important: The ooo-wishlist:product-added  event is only dispatched when the product has been successfully added. It will not fire if the wishlist limit has been reached or if another error occurs.

Listening for successful additions

You can listen for the ooo-wishlist:product-added  event to retrieve information about the added product and the updated wishlist.

document.addEventListener('ooo-wishlist:product-added', (event) => {  
  const {product, wishlist_product_list, wishlist_products_count} = event.detail;
  console.log('Added product:', product);  
  console.log('Updated wishlist:', wishlist_product_list);  
  console.log('Total items:', wishlist_products_count); 
});

Event properties

Here is the payload of detail variable:

{
// product contains the added product
product: {
  title: "", // String
  product_id: 0, // Integer
  handle: "", // String
  featured_media_url: "", // String
  variant_id: 0, // Integer
  variant_title: "" // String
},
// wishlist_product_list contains wishlist new content
wishlist_product_list: [
  {
    title: "", // String
    product_id: 0, // Integer
    handle: "", // String
    featured_media_url: "", // String
    variant_id: 0, // Integer
    variant_title: "" // String
  },
  { ... }
],
// wishlist_products_count indicates how many products are in the wishlist
wishlist_products_count: 5 // Integer
}

✏️ Note: If a customer adds products to his wishlist without being logged into their customer account, the products will be stored in their guest wishlist. As soon as they log in, the products from their guest wishlist are automatically added to their connected customer wishlist.

Remove a product from the wishlist

Use the removeProduct()  method to remove a product from the customer's wishlist.

window.Maestrooo.wishlist.removeProduct(handle, variant_id);

Parameters

• handle  (required): The Shopify product handle.
• variant_id  (optional): The Shopify variant ID. Defaults to null .

The method returns a Promise that resolves when the product has been successfully removed and rejects if an error occurs.

Complete example with error handling

async function removeFromWishlist(handle, variantId = null) {  
  try {    
    await window.Maestrooo.wishlist.removeProduct(handle, variantId);
    console.log('Product successfully removed from the wishlist');  
  } catch (error) {
    console.error('Unable to remove product from wishlist:', error);
    alert('An error occurred. Please try again.');  
  } 
}  
// Example usage:
removeFromWishlist('my-product-handle', 123456789);

Listening for successful removals

The ooo-wishlist:product-removed  event is dispatched after a product has been successfully removed from the wishlist.

document.addEventListener('ooo-wishlist:product-removed', (event) => {  
  const {product, wishlist_product_list, wishlist_products_count} = event.detail;
  console.log('Removed product:', product);
  console.log('Updated wishlist:', wishlist_product_list);
  console.log('Remaining items:', wishlist_products_count); 
});

The event is only dispatched when the removal succeeds. If the API request fails, the Promise is rejected and the error can be handled using try...catch .

The payload of the detail   variable contains the information about the deleted product:

{
// product contains the added product
product: {
  title: "", // String
  product_id: 0, // Integer
  handle: "", // String
  featured_media_url: "", // String
  variant_id: 0, // Integer
  variant_title: "" // String
},

// wishlist_product_list contains wishlist new content
wishlist_product_list: [
  {
    title: "", // String
    product_id: 0, // Integer
    handle: "", // String
    featured_media_url: "", // String
    variant_id: 0, // Integer
    variant_title: "" // String
  },
  { ... }
],
// wishlist_products_count indicates how many products are in the wishlist
wishlist_products_count: 5 // Integer
}

Check if a product is present in the wishlist

The function to check if a product is in the wishlist is window.Maestrooo.wishlist.containsProduct(handle). It takes the product's handle as a parameter. This function returns a Promise   and the result of this Promise   returns a boolean   .

If the product is in the wishlist, the function returns true  .

If the product is not in the wishlist, the function returns false  .

window.Maestrooo.wishlist.containsProduct(handle)
.then((productIsInWishlist) => console.log("result", productIsInWishlist));

Get products in wishlist

The function for retrieving all the products stored on the wishlist is window.Maestrooo.wishlist.getContent()   . It doesn't take any parameters and returns a Promise  . The Promise   returns a JSON   object of products.

Here's how to use the method:

window.Maestrooo.wishlist.getContent()
	   .then((result) => console.log("products", result.products));

And here is the result of the Promise   :

{
  "products": [
    {
      "added_at": "YYYY-MM-DDTHH:MM:SS.MMMZ", // String
      "id": 0, // Integer
      "product_id": 1111, // Integer
      "variant_id": 2222, // Integer
      "shop_id": 0, // Integer
      "title": "Title", // String
      "variant_title": "Variant Title", // String
      "handle": "handle", // String
      "featured_media_url": "//cdn.shopify.com/s/files/xxx", // String
      "created_at": "YYYY-MM-DDTHH:MM:SS.MMMZ", // String
      "updated_at": "YYYY-MM-DDTHH:MM:SS.MMMZ", // String
    }
  ]
}