4

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;
});
  • You only need to wishlist data? – Sukumar Gorai Jul 4 '18 at 7:58
  • I need to do it without "cachable=false" tag on xml block, this will break full page cache, so I need to get this information from customer data, an array of items in wishlist so I can add a different icon on items already in wishlist – Vlad Patru Jul 4 '18 at 8:06
  • @VladPatru Please share the code. – Prince Patel Jul 5 '18 at 6:01
  • @PrincePatel Updated answer – Vlad Patru Jul 6 '18 at 13:21
1

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

| improve this 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');
                            }
                        }
                    });
                }
    });
});

More wishlist issues resolved here - https://nwdthemes.com/2019/08/23/magento-2-working-with-wishlist

| improve this answer | |
0

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.

| improve this answer | |
  • I did that already but it returns an object, i need to get from that the items wich I couldn't get – Vlad Patru Jul 4 '18 at 8:09
  • I think it's easy to get. Please show me your code and update your question. – Khoa TruongDinh Jul 4 '18 at 8:14
0

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);
    }
}
| improve this answer | |
  • not working, I still get the undefined output "TypeError: wishlistItems is undefined" – Vlad Patru Jul 9 '18 at 6:43
  • Check updated answer. It's working fine for M2.2.5 – Sohel Rana Jul 9 '18 at 9:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.