We can customize the wishlist. We are adding this requirement below.
- The “Add to Wishlist” button in PLP does not require a drop-down menu.
- When we click the button, we only need to show the success message with a tick mark. The item will be saved to the “My List” default list.
- There is no need for different lists of wishlists. only needed one default list, “my list.”
- Duplicate products on the wishlist are unnecessary.
The code is added below
define(
'jj.WishlistCustom.WishlistCustom'
, [
'jj.WishlistCustom.WishlistCustom.View', 'ProductList.Control.View', 'jj_wishlistcustom_wishlistcustom.tpl', 'Utils', 'ProductList.Model', 'underscore', "GlobalViews.Message.View",
]
, function (
WishlistCustomView, ProductListControlView, jj_wishlistcustom_wishlistcustom_tpl, Utils, ProductListModel, _, GlobalViewsMessageView
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
// using the 'Layout' component we add a new child view inside the 'Header' existing view
// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
// more documentation of the Extensibility API in
// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
var pdp = container.getComponent('PDP');
if (layout) {
_.extend(ProductListControlView.prototype, {
// template: jj_wishlistcustom_wishlistcustom_tpl,
showFlyout: function (e) {
//e.stopPropagation();
// Here no extra validation is specified as those are not required to add an item
// into a product list
if (this.product.areAttributesValid(['options', 'quantity'], {})) {
// Hide any other open flyout instances...
jQuery('.product-list-control-flyout').hide();
var pdpinfo = pdp.getItemInfo();
var list;
this.collection.each(function (model) {
if (model.get('typeName') === "predefined") {
list = model
}
});
var items = list.get('items') && list.get('items').models
var internalid = pdpinfo && pdpinfo.item ? pdpinfo.item.internalid : '';
var itemlistexist = []
if (internalid != '') {
_.each(items, function (each) {
console.log(each && each.attributes && each.attributes.item.attributes.internalid, internalid)
if (each && each.attributes && each.attributes.item.attributes.internalid === internalid) {
itemlistexist.push(each)
}
else {
}
});
}
if (itemlistexist.length === 0) {
console.log(itemlistexist, ' this.items')
this.addItemToList(this.product, list, false);
this.Globalmessage()
}
else {
this.removeItemFromList(this.product, list);
}
}
},
Globalmessage: function () {
var message = 'Good! You added this item to your product list'
var global_view_message = new GlobalViewsMessageView({
message: message
, closable: true,
type: 'success'
});
setTimeout(function () {
var placeholder = $('[data-type="alert-wishlist"]')
console.log(global_view_message)
placeholder.html(global_view_message.render().$el.html());
}, 1000)
}
, removeItemFromList: function (line, list) {
console.log(list)
var self = this
, selected_line = list.get('items').find(function (product_list_line) {
return product_list_line.isEqual(line);
});
if (selected_line) {
selected_line.set('productList', {
id: list.get('internalid')
, owner: list.get('owner').id
});
list.get('items').remove(selected_line);
selected_line.destroy().done(function () {
list.collection.trigger('changed');
self.parentView.render();
self.addItemToList(self.product, list, false);
self.Globalmessage()
// self.parentView.hideConfirmationMessage();
});
}
else {
self.parentView.render();
}
}
, getContext: _.wrap(ProductListControlView.prototype.getContext, function getContext(fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
return context;
})
})
}
}
};
});
- Assumptions
- Could you please confirm whether a “Create New List” button on the My Account Wishlist page is required? Different lists are not required based on the requirements. There was only one default list that was required.
