[ADVANCED] Developer documentation

Javascript API

The wishlist API provides several functions, allowing you to:

• Add a product to the wishlist.
• Remove a product from the wishlist.
• Check if the wishlist contains a product.
• 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

The add to wishlist function is window.Maestrooo.wishlist.addProduct(handle) . It takes the handle of the product to be added to the wishlist as a parameter.

Once the call to the window.Maestrooo.wishlist.addProduct(handle) function is completed, and a custom event is triggered, allowing you to retrieve an array composed of product objects, named productList .

The triggered event is ooo-wishlist:product-added . Here's how you can retrieve the event and the data it contains:

EventTarget.addEventListener('ooo-wishlist:product-added', (event) => { 
	console.log('event', event.detail.productList)
})

Here is the payload of productList variable:

[
	{
		title: "", // String
		product_id: 0, // Integer
		handle: "", // String
		featured_media_url: "", // String
		variant_id: 0, // Integer
		variant_title: "" // String
	},
	{ ... }
]

✏️ 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

The function window.Maestrooo.wishlist.removeProduct(handle) allows you to remove a product from the wishlist. It takes the product's handle as a parameter.

Once the call to the window.Maestrooo.wishlist.removeProduct(handle) function is completed, a custom event is triggered, allowing you to retrieve a product object. The triggered event is ooo-wishlist:product-removed . Here's how you can capture the event and retrieve the information it contains:

EventTarget.addEventListener('ooo-wishlist:product-removed', (event) => { 
	console.log('event', event.detail.product)
})

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

{
	title: "", // String
	product_id: 0, // Integer
	handle: "", // String
	featured_media_url: "", // String
	variant_id: 0, // Integer
	variant_title: "" // String
}

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
    }
  ]
}