We need to show a notify button for the out-of-stock matrix item to notify the out-of-stock item. In the matrix item, if any one of the items is not out of stock, a button should be needed to hide it if the item is out of stock. It should be dynamically displayed based on the quantity available of each matrix item
//@module JJ.StockNotify.StockNotify
define('JJ.StockNotify.StockNotify.View', [
'jj_stocknotify_stocknotify.tpl',
'Backbone',
'JJ.StockNotify.StockNotify.Model',
'Profile.Model',
'SC.Configuration',
'sweetAlert'
], function (
jj_stocknotify_stocknotify_tpl,
Backbone,
StockNotifyModel,
ProfileModel,
Configuration,
swal
) {
'use strict';
// @class JJ.StockNotify.StockNotify.View @extends Backbone.View
return Backbone.View.extend({
template: jj_stocknotify_stocknotify_tpl,
initialize: function (options) {
this.container = options.container;
this.item = options.item.attributes.item ? options.item.attributes.item : null;
var container = this.container;
var pdp = container.getComponent('PDP');
pdp.on('afterOptionSelection', function afterOptionSelection() {
self.render();
});
},
events: {
'click [data-action="product-submit-request"]': "notifySubmitForm"
},
notifySubmitForm: function (e) {
e.preventDefault(); // Prevent default form submission
var profile = ProfileModel.getInstance();
var customerId = profile.get("internalid");
try {
var subItem;
this.model = new StockNotifyModel();
var product = this.item.get('internalid');
var container = this.container;
var pdp = container.getComponent('PDP');
var matrix_options = null;
var i = 0;
var stockinfo = pdp.getSelectedMatrixChilds(matrix_options);
if (!!stockinfo) {
var isPurchasableInfo = stockinfo[i].ispurchasable;
var quantityAvailable = stockinfo[i].quantityavailable;
if (isPurchasableInfo === false && quantityAvailable <= 0) {
subItem = stockinfo[i].internalid;
}
}
this.model.fetch({
data: {
customerId: customerId,
product: product,
subItem: subItem
}
}).done(function (result) {
if (result.successMessage === "submitted") {
swal("Notification Request submitted successfully", {
icon: "success",
});
} else if (result.successMessage === "already submitted") {
swal("Notification Request already submitted", {
icon: "warning",
});
} else {
swal("Notification Request submission is unsuccessful", {
icon: "warning",
});
}
});
} catch (ex) {
console.log('Product request error', ex);
}
},
getContext: function getContext() {
var container = this.container;
var pdp = container.getComponent('PDP');
var matrix_options = null;
var i = 0;
var showNotifyButton;
var NotifyButtonText = Configuration.StockNotify.config;
var stockinfo = pdp.getSelectedMatrixChilds(matrix_options);
if (!!stockinfo) {
var isPurchasableInfo = stockinfo[i].ispurchasable;
var quantityAvailable = stockinfo[i].quantityavailable;
if (isPurchasableInfo === false && quantityAvailable <= 0) {
showNotifyButton = true;
}
} else {
var isPurchasableInfo = this.item.get('ispurchasable');
var quantityAvailable = this.item.get('quantityavailable');
if (isPurchasableInfo === false && quantityAvailable <= 0) {
showNotifyButton = true;
}
}
return {
showNotifyButton: showNotifyButton,
NotifyButtonText: NotifyButtonText
};
}
});
});
Html for showing the button:{{#if showNotifyButton}}
<button id="idOfButton" class="back-in-stock-notification-button" data-action="product-submit-request">
{{NotifyButtonText}}
</button>
{{/if}}