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

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

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

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:

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

The payload of the detail variable contains the information of 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
    }
  ]
}