Display item name and stock count for out of stock items in checkout page

Requirement is to show the item name and stock count in the checkout page.

JavaScript entry point file


_.extend(OrderWizardStep.prototype, {
                 template: jj_overquantity_overquantity_tpl,
                getContext: _.wrap(OrderWizardStep.prototype.getContext, function(fn) {
                    var originalRet = fn.apply(this, _.toArray(arguments).slice(1));
					// var url = window.location.href;					
					var arr1=[],arr2=[];  				
					 _.each(this.options.wizard.model.get("lines").models, function eachScheduled(cartitems) {
						// console.log('cartitems', cartitems)  
						if((cartitems.get("quantity"))>(cartitems.get("item").get("quantityavailable"))){
							var itemname=cartitems.get("item").get("itemid");
							var itemquantity=cartitems.get("item").get("quantityavailable");
							// console.log("over itemname",itemname)
							// console.log("over itemquantity",itemquantity)
							arr1.push(itemname);arr2.push(itemquantity);
							originalRet.showerrormsg=true;	
							_.defer(function () {	
							$(".order-wizard-submitbutton-module-button").attr("disabled",true);
							$(".order-wizard-step-button-continue").attr("disabled",true);							
							});		
						}
					});
					// console.log("arr1",arr1)
					// console.log("arr2",arr2)
					// var message="We are unable to place the order because one or more items in your order is not available in sufficient quantity. Items are "
					// +arr1+" and the corresponding available quantities are "+arr2+"."; 
					// console.log("message",message)  
					originalRet.errormessage=message;
					originalRet.message1=arr1;
					originalRet.message2=arr2;	                                        
                    return originalRet;
                })

            })

Template

div data-action="skip-login-message" class="order-wizard-step-guest-message"></div>

{{#if showTitle}}
<header class="order-wizard-step-header">
  <h2 data-type="wizard-step-name-container" class="order-wizard-step-title">{{title}}</h2>
</header>
{{/if}}

<div data-type="alert-placeholder-step"></div>

<div class="order-wizard-step-review-wrapper">

  <section class="order-wizard-step-review-main">
    <div id="wizard-step-review-left"></div>
  </section>

  <section id="wizard-step-review-right" class="order-wizard-step-review-secondary">
  </section>

</div>
{{#if showerrormsg}}
<div class="over-quantity-error-message-section">
  <div class="over-quantity-error-message">
    <!-- <p>{{errormessage}}</p> -->
    <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>
</div>
{{/if}}
<div class="order-wizard-step-content-wrapper">

  <section id="wizard-step-content" class="order-wizard-step-content-main">
  </section>

  <div class="order-wizard-step-content-secondary-wrapper">
    <section id="wizard-step-content-right" class="order-wizard-step-content-secondary"></section>
  </div>

  <div class="order-wizard-step-actions">

    {{#if showBottomMessage}}
    <small class="order-wizard-step-message {{bottomMessageClass}}">
      {{bottomMessage}}
    </small>
    {{/if}}

    <div class="order-wizard-step-button-container">

      {{#if showContinueButton}}
      <button class="order-wizard-step-button-continue" data-action="submit-step">
        {{continueButtonLabel}}
      </button>
      {{/if}}
      <button class="order-wizard-step-button-back" {{#unless showBackButton}}style="display:none;" {{/unless}}
        data-action="previous-step">
        {{translate 'Back'}}
      </button>
    </div>
  </div>
</div>

SASS file


.over-quantity-error-message-section{
	color: #c01a29;
    background-color: #fdf0f2;
    border: 1px solid #f1ced1;
    padding: 10px;
    font-size: 0.93rem;
    display: inline-block;
    position: relative;
    border-radius: 0;
    line-height: 1.2;
    margin-bottom: 10px;
}
.over-quantity-error-message-section .over-quantity-error-message p{
	color: #c01a29;
}
.over-quantity-error-message-section .show-error-message-strong{
    font-weight: 600;
}