in entry file .js
define(
'JJ.displaystock.displaystock'
, [
'displaystock.View', 'LiveOrder.Model', 'Cart.Lines.View', 'GlobalViews.Message.View',
'Cart.Detailed.View', 'jj_displaystock_displaystock.tpl'
]
, function (
displaystockView, LiveOrderModel, CartLinesView,
GlobalViewsMessageView, CartDetailedView, jj_displaystock_displaystock_tpl
) {
'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');
// code to show error message in cart
_.extend(CartDetailedView.prototype, {
template: jj_displaystock_displaystock_tpl,
getContext: _.wrap(CartDetailedView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
//console.log("context", context);
var liveorder = LiveOrderModel.getInstance();
//console.log("liveorder", liveorder);
const itemname = [];
const orderdquantity = [];
const availablequantity = [];
const itemid = [];
var arr1 = [], arr2 = [];
// var errormsg = "We are unable to place the order because one or more items in your order is not available in sufficient quantity"+"."+"item are"+itemname[i]+"and the corressponding available quantity are"+availablequantity[i]+".";
context.name = '';
var url = window.location.href;
//var internalid = liveorder.attributes.lines.models[0].attributes.item.attributes.itemid
//console.log("itemid", internalid);
// console.log("length", liveorder.attributes.lines.length);
for (var i = 0; i < liveorder.attributes.lines.length; i++) {
itemid[i] = liveorder.attributes.lines.models[i].attributes.item.attributes.itemid
itemname[i] = liveorder.attributes.lines.models[i].attributes.item.attributes._name;
orderdquantity[i] = liveorder.attributes.lines.models[i].attributes.quantity;
availablequantity[i] = liveorder.attributes.lines.models[i].attributes.item.attributes.quantityavailable;
// console.log("itemid", itemid[i]);
// console.log("Item Name", itemname[i])
// console.log("Selected Quantity", orderdquantity[i])
// console.log("Available Quantity", availablequantity[i])
if (orderdquantity[i] > availablequantity[i]) {
// console.log("itemid if", itemid[i]);
// console.log("Item Name if", itemname[i])
// console.log("Selected Quantity if", orderdquantity[i])
// console.log("Available Quantity if", availablequantity[i])
// context.name = context.name + ' ' + itemname[i] + ', ';
// console.log("context-name", itemname[i])
// console.log(errormsg);
context.showerrormessage = true;
// context.errormsg = errormsg;
arr1.push(itemid[i]);
arr2.push(availablequantity[i]);
_.defer(function () {
$(".cart-summary-button-proceed-checkout").attr("disabled", true);
$(".cart-detailed-proceed-to-checkout").attr("disabled", true);
})
}
// else {
// $(".cart-summary-button-proceed-checkout").attr("disabled", false);
// }
// console.log("arr1", arr1)
// console.log("arr2", arr2)
}
// context.name = context.name.replace(/,*$/, '');
// console.log("context-name", context)
// var errormsg = "We are unable to place the order because one or more items in your order is not available in sufficient quantity" + "." + "item are " + arr1 + "and the corressponding available quantity are " + arr2 + ".";
// console.log("errormsg",errormsg)
// context.errormsg = errormsg;
context.message1 = arr1;
context.message2 = arr2;
return context;
})
})
}
};
});
in template file .tpl
<div class="cart-detailed">
<div class="cart-detailed-view-header">
<header class="cart-detailed-header">
{{#if showLines}}
<h1 class="cart-detailed-title">
{{pageHeader}}
<small class="cart-detailed-title-details-count">
({{productsAndItemsCount}})
</small>
</h1>
{{else}}
<h2 class="cart-detailed-title">{{translate 'Your Shopping Cart is empty'}}</h2>
{{/if}}
</header>
</div>
<div data-cms-area="cart_detailed_cms_area_1" data-cms-area-filters="path"></div>
<div class="cart-detailed-body">
{{#if showerrormessage}}
<div class="cart-overquantity-error-message">
<p>We are unable to place the order because one or more items in your order is not available in sufficient
quantity. Items are <span class="show-error-message-strong">
{{message1}}
</span>and the corresponding available quantities are <span class="show-error-message-quantity">
{{message2}}
</span>.</p>
</div>
{{/if}}
<section class="{{#if showLines}}cart-detailed-left {{else}}cart-detailed-empty{{/if}}">
{{#unless showLines}}
<div data-view="Quick.Order.EmptyCart">
<p class="cart-detailed-body-info">
{{translate 'Continue Shopping on our <a href="/" data-touchpoint="home">Home Page</a>.' }}
</p>
</div>
{{/unless}}
<div data-view="Quick.Order"></div>
{{#if showLines}}
<div class="cart-detailed-proceed-to-checkout-container">
<a class="cart-detailed-proceed-to-checkout" data-action="sticky" href="#" data-touchpoint="checkout"
data-hashtag="#">
{{translate 'Proceed to Checkout'}}
</a>
</div>
<div data-confirm-message class="cart-detailed-confirm-message"></div>
<div class="cart-detailed-item-view-cell-actionable-table cart-detailed-table-row-with-border">
<div data-view="Item.ListNavigable">
</div>
</div>
<div class="cart-detailed-item-free-info" data-view="FreeGift.Info"></div>
<div class="cart-detailed-item-free" data-view="Item.FreeGift"></div>
{{/if}}
<div data-cms-area="cart_detailed_cms_area_2" data-cms-area-filters="path"></div>
</section>
{{#if showLines}}
<section class="cart-detailed-right">
<div data-view="Cart.Summary"></div>
</section>
{{/if}}
</div>
<div class="cart-detailed-footer">
{{#if showLines}}
<div data-view="SavedForLater" class="cart-detailed-savedforlater"></div>
<div data-view="RecentlyViewed.Items" class="cart-detailed-recently-viewed"></div>
<div data-view="Related.Items" class="cart-detailed-related"></div>
<div data-view="Correlated.Items" class="cart-detailed-correlated"></div>
{{else}}
<div data-view="SavedForLater" class="cart-detailed-savedforlater"></div>
{{/if}}
</div>
<div data-cms-area="cart_detailed_cms_area_3" data-cms-area-filters="path"></div>
</div>in sass file
.cart-summary-button-proceed-checkout:disabled,
.cart-summary-button-proceed-checkout[disabled] {
border: 1px solid #949594;
background-color: #949594;
color: #ffffff;
}
.cart-overquantity-error-message p{
color:#c01a29;
}
.cart-detailed-proceed-to-checkout:disabled,
.cart-detailed-proceed-to-checkout[disabled]{
border: 1px solid #949594;
background-color: #949594;
color: #ffffff;
}