Get wishlist item's array
-
17-01-2021 - |
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;
});
Solution
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
OTHER TIPS
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');
}
}
});
}
});
});
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.
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);
}
}