Magento 2 – How to get wishlist data in custom js?

Hello Devs, In this tutorial we are going to see how to get a customer wishlist data in a custom js component.

We can get customer data by injecting “Magento_Customer/js/customer-data” using require function in our custom js/javascript component in Magento 2.

After injecting the object, we can use customerData.get(‘wishlist’)() to get the customer’s wishlist items and their wishlist-related information.

Let’s see and understand it using the below example.

/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
require(['Magento_Customer/js/customer-data'], function(customerData){
    var wishlist = customerData.get('wishlist')();
    console.log('Whishlist Items : ', wishlist);
    if(wishlist.items) {
        var wishlistItems = wishlist.items;
        
        for (var i = 0; i < wishlistItems.length; i++) {
            var product = wishlistItems[i];
            console.log(product.product_name);
        }
    }
});

You may also like:

How to use jQuery in Magento 2?

Magento 2 – How to get customer data in custom js?

That’s it for this tutorial, I will see you in the next tutorial. Happy Coding 🙂