I am trying to figure out the best method of detecting a step change in Magento 2's checkout. For example going from shipping details to payment, or vice versa.

I have done some digging and in vendor/magento/module-checkout/view/frontend/web/js/model/step-navigator.js I can use next() which fires on the continue button, and navigateTo() which fires when a user clicks on the checkoutstep directly - but both methods seem rather hacky, there must be a cleaner way to detect a step change regardless of how and which step.

I was hoping for a stepChange() function or something similar that fires whenever a checkout step change happens.

My question:

What is the best method to trigger my custom JS when a checkout step change occurs?


You can register a handle for when the hash code changes, i.e. $(window).hashchange(callBack).

This is what happens in Magento_Checkout/view/frontend/web/js/view/progress-bar.js:

$(window).hashchange(_.bind(stepNavigator.handleHash, stepNavigator));

This causes the stepNavigator.handleHash function to execute whenever the step changes because changing steps using next or navigateTo changes the window's hash.

|improve this answer|||||
  • Thanks Aaron, apologies I didn't give the full bounty I wasn't aware there was a deadline for it. – Ben Crook Apr 24 '17 at 12:17

Good question. I do not know what is the best way (I'm interested to other answers) but i think that adding a custom event to the .next() or .isProcessed() function and pass to it the current step could be a pretty good solution.

|improve this answer|||||
  • 1
    I don't think adding it to next is a good idea as then it wouldn't fire when you go back a step – Ben Crook Feb 28 '18 at 10:52

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.