2

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?

0

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.

5
  • Sadly this didn't work :(
    – Katch
    Aug 21 '18 at 16:17
  • 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
    Aug 21 '18 at 16:37
  • Maybe this mixin isn't the right place? Maybe it shouldn't be in a action but model or something else perhaps?
    – Katch
    Aug 21 '18 at 16:46
  • This is the full source. What more should I provide?
    – Katch
    Aug 21 '18 at 16:57
  • @Katch Did you find any solution for this ? May 26 '20 at 10:25
0

Try using like below

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.