Get wishlist item's array

Question

I made an add to wishlist with ajax module and I want to indicate if the product is already in wishlist without breaking the full page cache. I know the wishlist object is in customer-data but I can't get the Items from that object. Can you help me with some pointers?

js file code

define([
    'jquery',
    'Magento_Customer/js/customer-data',
    'Magento_Customer/js/model/customer',
    'jquery/ui'
], function ($, customerData, customer) {
    'use strict';

    $.widget('test.wishlistChecker', {
        wishlistClass: 'in-wishlist',

        /** @inheritdoc */
        _create: function () {
            console.log('test checker');
            this.checkWishlistItems();
        },

        /**
         * Check customer wishlist
         */
        checkWishlistItems: function () {
            var wishlistItems = customerData.get('wishlist')['items'];

            console.log(wishlistItems);

        }
    });

    $(document).wishlistChecker();

    return $.test.wishlistChecker;
});

Answer 1

customer-data updated via ajax, so it might not have the wishlist information at the initialization. Luckily customer-data use knockout observable functionality, so we can subscribe to data update event.

Check this sample. It tries to check the data on initialization and subscribe to update event at the same time.

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data', 
    'domReady'
], function ($, Component, customerData) {
    'use strict';

    return Component.extend({
        /** @inheritdoc */
        initialize: function () {
            var _this = this;
            
            this._super();
            
            this.wishlist = customerData.get('wishlist');
            this.wishlist.subscribe(function(newValue) {
                _this.decorateItems();
            });

            _this.decorateItems();
        },
        
        decorateItems: function() {
                var items = this.wishlist().items;
            
                if (typeof items === 'undefined' || !items.length) return;
            
                $('a.action.towishlist').each(function(){
                        var data = $(this).data('post'),
                            i;
    
                        for (i = 0; i < items.length; i++) {
                            if (data.data.product === items[i].product_id) {
                                $(this).addClass('selected');
                            }
                        }
                    });
                }
    });
});

Answer 2

Take a look at here: vendor/magento/module-wishlist/view/frontend/web/js/view/wishlist.js

this.wishlist = customerData.get('wishlist');

But, it's just the general info about the wishlist items. The data doesn't have the product id or product sku.

Answer 3

so after some tests, the js widget version is not working every time so best sollution was to integrate with uiComponent as follows

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function ($, Component, customerData) {
    'use strict';

    return Component.extend({
        initialize: function (config, node) {
            this._super();

            this.wishlist = customerData.get('wishlist')();
            this.items = this.wishlist.items;
            var nodeRef = node.getAttribute('data-ref');


            if (this.items) {
                for (var i = 0; i < this.items.length; i++) {
                    var product = this.items[i];
                    if (nodeRef === product.product) {
                        node.className += " " + 'wishlist-full';
                    }
                }
            }
        }
    });
});

and I also added a new data-ref Attr to the add-to-wishlist action element that conains the product_id

thanks @Sohel Rana for the starting point

Answer 4

Try following way:

var wishlist = customerData.get('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);
        console.log(product.image);
    }
}