Here we learn how to make a PO field Mandatory for specefic subsidiary orders based on if the PO number field is empty or not.
Example:
Template:
<div class="order-wizard-paymentmethod-purchasenumber-module">
<h3 class="order-wizard-paymentmethod-purchasenumber-module-title">
{{translate 'Purchase Order Number'}}
</h3>
<div class="order-wizard-paymentmethod-purchasenumber-module-row">
<label for="purchase-order-number"
class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-label">
{{translate 'Enter Purchase Order Number'}}
{{#if isSubsidiaryUK}}
<span class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-optional"
style="color: rgba(255, 0, 0,1);"> {{ translate '*' }}
</span>
{{else}}
<span class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-optional">
{{ translate '(Optional)' }}
</span>
{{/if}}
</label>
<input type="text" name="purchase-order-number" id="purchase-order-number"
class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-value" value="{{purchaseNumber}}">
<div id="po-error-message" class="error-message" style="display: none; color: rgba(255, 0, 0,1);"></div>
</div>
</div>
JavaScript:
Find and extend the correct view and use the below code,
_.extend(OrderWizardModulePaymentMethodPurchaseNumber.prototype, {
template: jj_CheckoutPagePurchaseOrderField_CheckoutPagePurchaseOrderField_tpl,
getContext: _.wrap(OrderWizardModulePaymentMethodPurchaseNumber.prototype.getContext, function (fn) {
let original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
var profile = ProfileModel.getInstance();
var subsidiary = profile.get('subsidiary');
var isSubsidiaryUK = false;
if(subsidiary === '12'){
isSubsidiaryUK = true;
}
original_Ret.isSubsidiaryUK = isSubsidiaryUK;
return original_Ret;
}),
submit: _.wrap(OrderWizardModulePaymentMethodPurchaseNumber.prototype.submit, function (originalSubmit, e) {
var currentStep = this.wizard.currentStep;
var profile = ProfileModel.getInstance();
var subsidiary = profile.get('subsidiary');
var errorMessage = document.getElementById('po-error-message');
var purchase_order_number = this.$('[name=purchase-order-number]').val() || '';
var poNumber = purchase_order_number.trim(' ');
if (currentStep == 'billing') {
if (subsidiary === '12' && (poNumber === null || poNumber === '')) {
errorMessage.textContent = 'Please enter the Purchase Order Number.';
errorMessage.style.display = 'block';
$('[data-type="alert-placeholder-step"]').css('display', 'none');
setTimeout(() => {
$("html, body").animate({
scrollTop: $('.order-wizard-paymentmethod-purchasenumber-module-title').offset().top - 70
}, 10);
}, 10);
return jQuery.Deferred().reject();
}
else {
errorMessage.textContent = '';
errorMessage.style.display = 'none';
}
}
originalSubmit.call(this, e);
})
})