We can use this solution to show the added favorites child item in a popup, and we can remove existing favorite matrix child items or add matrix child items from the InModel popup.
Javascript
EntryPoint:
_.extend(FacetsItemCellView.prototype, {
events: _.extend({}, FacetsItemCellView.prototype.events, {
'click [alt="favourite-icon"]': 'plpaddToFav',
'click [alt="remove-favourite-icon"]': 'plpaddToFav'
}),
plpaddToFav: function plpaddToFav(e) {
Backbone.Events.trigger("plpaddToFav", e);
},
removeFav: function removeFav(e) {
Backbone.Events.trigger("removeFav", e);
},
});
_.extend(FacetsBrowseView.prototype, {
initialize: _.wrap(FacetsBrowseView.prototype.initialize, function (fn) {
try {
fn.apply(this, _.toArray(arguments).slice(1));
var self = this;
var PLP = this.options.application.getComponent('PLP');
this.profilemodel = ProfileModel.getInstance();
this.is_logged_in = this.profilemodel.get('isLoggedIn') === 'T' && this.profilemodel.get('isGuest') === 'F';
//To Get the Fav List
PLP.on("afterShowContent", function () {
if (self.is_logged_in) {
self.FavModel = new FavouritesCollection();
self.FavModel.fetch().done(function (result) {
self.FavModelresult = result.parsedFav;
self.FavitemIds = result.itemIds
self.render();
});
}
});
// Creating Events to trigger from the ChildView
Backbone.Events.off("plpaddToFav");
Backbone.Events.on("plpaddToFav", this.plpaddToFav, this);
Backbone.Events.off("removeFav");
Backbone.Events.on("removeFav", this.removeFav, this);
} catch (error) {
console.log('ERROR @ FacetsBrowseView intialize', error);
}
}),
plpaddToFav: function plpaddToFav(e) {
try {
var self = this;
self.FavModel = new FavouritesCollection();
self.FavModel.fetch().done(function (result) {
self.FavModelresult = result.parsedFav;
self.FavitemIds = result.itemIds
var id = JSON.stringify($(e.currentTarget).data("itemId"));
let matrixParent = _.find(self.model.get('items').models, childItem => JSON.stringify(childItem.id) === id);
let childItems = matrixParent.get("_matrixChilds").models;
if (self.is_logged_in) {
if (childItems.length > 1) {
let view = new FavouritesSelectView({matrixParent: matrixParent, parentView: self});
view.useLayoutError = true;
container.getLayout().showInModal(view);
} else {
let isItemInFavorites = _.contains(self.FavitemIds, JSON.stringify(childItems.length === 1 ? childItems[0].id : matrixParent.id));
if (!isItemInFavorites) {
self.FavModel.fetch({ data: { addItem: childItems.length === 1 ? childItems[0].id : matrixParent.id } }).then(res => {
self.FavModel.fetch().done(function (result) {
self.FavModelresult = result.parsedFav;
self.FavitemIds = result.itemIds
swal(`${(childItems.length === 1 ? childItems[0] : matrixParent).get('_sku')} is added to your favorites list`,{
icon: "success",
})
self.render();
});
})
} else {
self.FavModel.fetch({ data: { itemInternalId: childItems.length === 1 ? childItems[0].id : matrixParent.id } }).then(res => {
self.FavModel.fetch().done(function (result) {
self.FavModelresult = result.parsedFav;
self.FavitemIds = result.itemIds;
swal(`${(childItems.length === 1 ? childItems[0] : matrixParent).get('_sku')} is removed from your favorites list`,{
icon: "warning",
})
self.render();
});
})
}
}
} else {
//If Logged out showing warning message
swal("Please Login to continue", {
icon: "warning",
});
}
});
} catch (error) {
console.log('ERROR @ FacetsBrowseView PLP ADD TO FAV', error);
}
},
getContext: _.wrap(FacetsBrowseView.prototype.getContext, function (fn) {
try {
var orginalret = fn.apply(this, _.toArray(arguments).slice(1));
var self = this;
//showing active fav list on the page load
_.defer(function () {
var uniqueItemIds = self.FavitemIds ? self.FavitemIds : _.uniq(_.pluck(self.FavModelresult, 'itemid'))
$('svg.fav-out, svg.fav-in').each(function () {
var itemId = JSON.stringify($(this).data('item-id'));
let matrixParent = _.find(self.model.get('items').models, childItem=> JSON.stringify(childItem.id) === itemId);
let isItemInFavorites = false;
if (matrixParent.get("_matrixChilds").models.length) {
_.each(matrixParent.get("_matrixChilds").models, childItem => {
isItemInFavorites = _.contains(uniqueItemIds, JSON.stringify(childItem.get("internalid"))) ? true : isItemInFavorites;
})
} else {
isItemInFavorites = _.contains(uniqueItemIds, JSON.stringify(matrixParent.get("internalid")))
}
if ($(this).hasClass('fav-out')) {
$(this).toggleClass('show-button', isItemInFavorites);
} else if ($(this).hasClass('fav-in')) {
$(this).toggleClass('show-button', !isItemInFavorites);
}
});
});
return orginalret;
} catch (error) {
console.log('ERROR @ FacetsBrowseView getContext', error);
}
}),
});
Favourites.Select.View.js
// @module JJ.Favourites.Favourites
define('Favourites.Select.View',
[
'jj_favourites_selects.tpl',
'Backbone',
'sweetAlert',
"SC.Configuration"
],
function (
jj_favourites_selects_tpl,
Backbone,
sweetAlert,
Configuration
)
{
'use strict';
return Backbone.View.extend({
template: jj_favourites_selects_tpl,
initialize: function (options) {
try {
let self = this;
self.favCollection = [];
let favSelectedItems = self.options.parentView.FavitemIds
_.each(self.options.matrixParent.get("_matrixChilds").models, item => {
let isSelected = _.contains(favSelectedItems, JSON.stringify(item.get("internalid")));
let optionColor = item.get("custitem36") && item.get("custitem_jj_colour") ? { color: item.get("custitem_jj_colour").toUpperCase(), background: _.find(Configuration.get("ItemOptions.optionsConfiguration"), config=> config.cartOptionId === "custcol_jj_color")?.colors[item.get("custitem_jj_colour")], size: item.get("custitem36").toUpperCase() } : item.get("custitem36") ? { size: item.get("custitem36").toUpperCase() } : { color: item.get("custitem_jj_colour").toUpperCase(), background: _.find(Configuration.get("ItemOptions.optionsConfiguration"), config=> config.cartOptionId === "custcol_jj_color")?.colors[item.get("custitem_jj_colour")], };
let internalId = item.get("internalid");
self.favCollection.push({isSelected: isSelected, option: optionColor, internalid: internalId, isUpdated: false})
})
} catch (error) {
console.log('ERROR @ Favourites.Select.View intialize', error);
}
},
events: {
'click [data-action="update-favourites"]' : "updateFavCollection",
'click [data-action="save-favourites"]' : "saveFavCollection"
},
updateFavCollection: function (e) {
try {
let self = this;
const { item } = e.currentTarget.dataset;
let currentItem = _.find(self.favCollection, favItem => JSON.stringify(favItem.internalid) === item);
currentItem.isSelected = !currentItem.isSelected;
currentItem.isUpdated = true;
self.render()
} catch (error) {
console.log('ERROR @ Favourites.Select.View updateFavCollection', error);
}
},
fetchFavCollection: function () {
try {
$('button[data-dismiss="modal"]').click();
let self = this;
self.options.parentView.FavModel.fetch().then(result => {
self.options.parentView.FavModelresult = result.parsedFav;
self.options.parentView.FavitemIds = result.itemIds;
_.defer(() => {
self.options.parentView.render();
sweetAlert(`Selected options are updated in your favorites list`,{
icon: "success",
}
);
})
})
} catch (error) {
console.log('ERROR @ Favourites.Select.View fetchFavCollection', error);
}
},
saveFavCollection: function () {
try {
let self = this;
let updatedFav = _.filter(self.favCollection, item => item.isUpdated);
_.each(updatedFav, (item, key) => {
if (item.isUpdated) {
_.defer(() => {
if (item.isSelected) {
self.options.parentView.FavModel.fetch({ data: { addItem: item.internalid } }).then(res => {
if (updatedFav.length === key + 1) {
self.fetchFavCollection();
}
})
} else {
self.options.parentView.FavModel.fetch({ data: { itemInternalId: item.internalid } }).then(res => {
if (updatedFav.length === key + 1) {
self.fetchFavCollection();
}
})
}
})
}
});
} catch (error) {
console.log('ERROR @ Favourites.Select.View saveFavCollection', error);
}
},
getContext: function getContext(){
try {
return {
favCollection: this.favCollection,
name: (this.options.matrixParent.get("_name")).toUpperCase()
};
} catch (error) {
console.log('ERROR @ Favourites.Select.View getContext', error);
}
}
});
});
template:
<section id=“favourites-selection”>
<h2 class=“fav-title”>Select the favorite options of <b>{{name}}</b></h2>
<div class=“matrix-options”>
{{#each favCollection}}
<div class=“group-option-input”>
<span class=“product-views-option-color-picker-tooltip”>
{{#if option.background}}
{{#if option.size}}
{{option.color}} – {{option.size}}
{{else}}
{{option.color}}
{{/if}}
{{/if}}
</span>
<input type=“checkbox” name=“data-item-{{internalid}}” class=“group-input-checkbox” data-item=“{{internalid}}” {{#if isSelected}} checked {{/if}}>
<label for=“data-item-{{internalid}}” class=“group-input-label” data-item=“{{internalid}}” data-action=“update-favourites”>
{{#if option.background}}
<span value=“{{internalid}}” class=“product-views-option-color-picker-box {{#if isSelected}}active{{/if}} {{#if isLightColor}}product-views-option-color-picker-box-white-border{{/if}}” style=“background: {{option.background}}; background-size: contain; width: 40px; height: 40px;”></span>
{{else}}
<span class=“option-size”>{{option.size}}</span>
{{/if}}
</label>
</div>
{{/each}}
</div>
<div class=“selection-options”>
<button id=“discard” data-dismiss=“modal”>Cancle</button>
<button id=“add-to-fav” data-action=“save-favourites”>Save</button>
</div>
</section>