Magento2 - Wait for checkout page completely loaded and fire JS code

Question

The goal is to add a piece of JS to manipulate a date picker on the checkout page. I use an OSC (OneStepCheckout from mageplaza). So far I've followed this documentation and added this mixin:

var config = {
 config: {
 mixins: {
 'Magento_Checkout/js/action/set-shipping-information': {
 'Vendor_Module/js/action/set-shipping-information-mixin': true
 },
 }
 }
}

in this file:

define([
 'jquery',
 'mage/utils/wrapper',
], function (,ドル wrapper) {
 'use strict';
 // the html is not there so this is empty
 var datepicker = $('#datepicker')
 return function (setShippingInformationAction) {
 return wrapper.wrap(setShippingInformationAction, function (originalAction) {
 // ... some custom code ... //
 return originalAction();
 });
 };
});

When I load the page the date picker var has no HTMLElements, the reason is that the checkout is loading all the checkout components. So how can I tell the mixin to wait until the checkout components are completely done/loaded?

Maybe it shouldn't be a mixin?

Answer 1

Try using like below

require([
'jquery',
'Magento_Ui/js/lib/view/utils/dom-observer',
], function (,ドル$do) {
 $(document).ready(function(){
 $do.get('.class-name', function(elem){
 $(elem).addClass('test-class');
 //your code
 });
 });
});

• giangvdm: This works for me, +1.

Answer 2

You can wait for the DOM to be ready with this !domReady requireJs utility.

define([
 'jquery',
 'mage/utils/wrapper',
 '!domReady'
], function (,ドル wrapper) {
 'use strict';
 var datepicker = $('#datepicker')
 return function (setShippingInformationAction) {
 return wrapper.wrap(setShippingInformationAction, function (originalAction) {
 // ... some custom code ... //
 return originalAction();
 });
 };
});

However due to knockout templates loading asynchronously via knockout this may not work.

I would try initializing datepicker in the wrapper itself. Something like so:

define([
 'jquery',
 'mage/utils/wrapper',
 '!domReady'
], function (,ドル wrapper) {
 'use strict';
 var datePickerFunc = function() {
 var datepicker = $('#datepicker');
 ...do datepicker things....
 };
 return function (setShippingInformationAction) {
 return wrapper.wrap(setShippingInformationAction, function (originalAction) {
 datePickerFunc();
 // ... some custom code ... //
 return originalAction();
 });
 };
});

None of this is tested.

• Katch: Sadly this didn't work :(
• Katch: The mixin is working (as far as I can tell). I placed the console logs in both functions but only the return function (setShippingInformationAction) logs something. But I think that is correct because the setShippingInformationAction isn't triggered yet.
• Katch: Maybe this mixin isn't the right place? Maybe it shouldn't be in a action but model or something else perhaps?
• Katch: This is the full source. What more should I provide?
• Juliano Vargas: @Katch Did you find any solution for this ?