I am working on a customization of the checkout page in M2, in particular I am trying to add to the 'discount' section of the page. In this part of the page I need to call a third party javascript library once the html template has loaded.
I have looked into knockout lifecycle events, however they are unavailable, because they are 3.5.0, and KO version in M 2.3.1 is 3.4.2.
Now I am looking into adding a custom binding, and hoping to add the call to the third party lib in the init
method.
My code looks roughly like this:
/app/code/Company/Module/view/frontend/web/js/view/payment/discount.js
define([
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote',
'Magento_SalesRule/js/action/set-coupon-code',
'Magento_SalesRule/js/action/cancel-coupon',
'certificateInfo',
"setCertificateInfo",
"cancelCertificateInfo",
'Magento_Checkout/js/model/error-processor',
'Magento_SalesRule/js/model/payment/discount-messages',
], function ($, ko, Component, quote, setCouponCodeAction, cancelCouponAction, certificateInfo, setCertificateInfo, cancelCertificateInfo,errorProcessor, messageContainer) {
ko.bindingHandlers.myBinding = {
init: function(element, valueAccessor, allBindingsAccessor, data, context) {
// Call third party lib here
}
}
});
/app/code/Company/Module/view/frontend/web/template/payment/discount.html
<p data-bind="myBinding: blah">
<!-- Markup that needs to have 3rd party call to work... -->
</p>
All that is happening is an error on the page
[ERROR] Failed to load the "Company_Module/js/view/payment/discount" component.
Any idea what I am doing wrong with custom binding, or a different way to achieve my goal?