To add the quantity and update that we need to create events and add the data action on the tpl file and extend the view and add code in the events so it will work .
code:
_.extend(HeaderMiniCartItemCellView.prototype, {
template:jj_minicartcustomization_minicartcustomizationcartcell_tpl,
events: {
'click [data-action="clear-all"]': "clearAll",
'click [data-action="show-minicart"]': 'showMinicartpopup'
},
clearAll: function clearAll() {
var self = this;
var itemarray = this.model.get('lines').models;
for (let i = 0; i < itemarray.length; i++) {
if (itemarray[i].cartitemid) {
var arrayitems = itemarray[i];
var remove_promise = self.model.removeLine(arrayitems);
}
}
return true;
},
showMinicartpopup: function showMinicartpopup() {
if (
Utils.isTabletDevice() ||
Utils.isDesktopDevice()
) {
this.$('[data-type="mini-cart"]')
.parent()
.toggleClass('show');
}
}
}),
_.extend(HeaderMiniCartView.prototype, {
template:jj_minicartcustomization_minicartcustomization_tpl,
events: {
'click [data-action="remove-item"]': "removeItem",
'click [data-action="addQuantity"]': 'addQuantity',
'click [data-action="removeQuantity"]': 'removeQuantity',
'change [data-type="quantity-input"]': 'changeQuantity',
},
changeQuantity: function changeQuantity(e) {
e.preventDefault();
var currentitemid = this.$(e.target).data('internalid');
var array = this.model.get('lines').models;
var foundIndex = array.findIndex((el) => (el.cartitemid === currentitemid));
var item_quantity = this.model.get('lines').models[foundIndex];
var $element = this.$(e.target);
var $input_quantity = $element.parent().find('input');
var new_value = parseInt($input_quantity.val(), 10);
item_quantity.set('quantity', new_value);
var update_promise = this.model.updateLine(item_quantity, true);
//console.log("update_promise",update_promise);
this.render();
return update_promise;
},
removeQuantity: function removeQuantity(e) {
e.preventDefault();
var currentitemid = this.$(e.target).data('internalid');
var array = this.model.get('lines').models;
var foundIndex = array.findIndex((el) => (el.cartitemid === currentitemid));
var item_quantity = this.model.get('lines').models[foundIndex];
var value = parseInt(this.$(e.currentTarget).data('value'), 10);
//console.log("value",value);
var $element = this.$(e.target);
var $input_quantity = $element.parent().find('input');
var old_value = parseInt($input_quantity.val(), 10);
//console.log("old_value",old_value);
if (old_value == 1) {
var new_quantity = old_value + 0;
} else {
var new_quantity = old_value + value;
}
item_quantity.set('quantity', new_quantity);
var update_promise = this.model.updateLine(item_quantity, true);
//console.log("update_promise",update_promise);
this.render();
return update_promise;
},
addQuantity: function addQuantity(e) {
e.preventDefault();
var value = parseInt(this.$(e.currentTarget).data('value'), 10);
//console.log("value",value);
var currentitemid = this.$(e.target).data('internalid');
var array = this.model.get('lines').models;
var foundIndex = array.findIndex((el) => (el.cartitemid === currentitemid));
var item_quantity = this.model.get('lines').models[foundIndex]
var $element = this.$(e.target);
var $input_quantity = $element.parent().find('input');
var old_value = parseInt($input_quantity.val(), 10);
//console.log("old_value",old_value);
var new_quantity = old_value + value;
//console.log("new_quantity", new_quantity);
item_quantity.set('quantity', new_quantity);
var update_promise = this.model.updateLine(item_quantity, true);
//console.log("update_promise",update_promise);
this.render();
return update_promise;
},
removeItem: function removeItem(e) {
var self = this;
var currentitemid = this.$(e.target).data('internalid');
// console.log("currentitemid", currentitemid);
var array = self.model.get('lines').models;
//console.log("array", array);
var foundIndex = array.findIndex((el) => (el.cartitemid === currentitemid));
//console.log("foundIndex", foundIndex);
var product = self.model.get('lines').models[foundIndex]
//console.log("product", product);
var remove_promise = self.model.removeLine(product);
//console.log("remove_promise", remove_promise);
var internalid = product.get('cartitemid');
this.isRemoving = true;
this.disableElementsOnPromise(
remove_promise,
`article[id="${internalid}"] a, article[id="${internalid}"] button`
);
remove_promise.always(function () {
self.isRemoving = false;
});
return true;
},
getContext: _.wrap(HeaderMiniCartView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
var subtotal;
var minicartlines = this.model.get('lines').models
_.each(minicartlines, function (line) {
});
var itemsincart = this.model.get('lines').models;
var cartitemlength = itemsincart.length;
context.cartitemLength = cartitemlength;
var isLoggedIn = ProfileModel.getInstance().get('isLoggedIn') === 'T';
context.isLoggedIn = isLoggedIn;
if (itemsincart) {
itemsincart.forEach(function (itemsincart) {
var cartitemid = itemsincart.attributes.item.id;
itemsincart.cartitemid = cartitemid;
itemsincart.attributes.cartitemid = cartitemid;
})
}
return context;
})
})