Magento2: Reloading after first checkout step submit in guest flow

[pavelshulga]

Preconditions

1. Magento EE 2.1.2
2. nginx/Apache
3. Varnish/no varnish
4. Latest Chrome/Safari
5. Guest flow and only first attempt (clear cookies for current user before)

Steps to reproduce

1. Add any product to cart
2. Go to checkout and fill first step form (product should have weight to make first step accessible)
3. Click on "Next" button to trigger first step validation
4. After successful checkout first step validation page reloads
5. After reload address information is missing (caused by https://github.com/magento/magento2/issues/6817, fixed by application of changes from that thread)

Expected result

1. Page should not be reloaded

Actual result

1. Page is reloaded immediately after second step is loaded/rendered

Problem flow and causes

When the user clicks on "Next" button next actions are run:

• knockout submit binding is run on shipping form submit (as whole checkout consists of bunch of small forms) data-bind="submit: setShippingInformation"
• check if current flow is guest flow, if so - trigger validation for checkout login form
• if validation of login form is successful then trigger shipping form validation
• if shipping form validation is successful then run shipping form sending to backend via AJAX query
• then on ajaxStop event customer-data getFromServer action is run
• checkout second step form is rendered
• page reloading is run

All the actions are processed successfully but for unknown reasons the page is reloaded. Knockout submit binding processed in correct way and isn't a cause of the problem - according to knockout documentation regular submit event handling is possible only if handler returns boolean true, but in this case handler is ok and architected in right way.

The cause is implicit and quite simple by it's nature. Checkout step navigation is made via separate JS model Magento_Checkout/js/model/step-navigator and is run in Magento_Checkout/js/view/shipping:

setShippingInformation: function () {
                if (this.validateShippingInformation()) {
                    setShippingInformationAction().done(
                        function () {
                            stepNavigator.next();
                        }
                    );
                }
            }

This method changes hash of the page to #payment but in Magento_Checkout/js/view/progress-bar any hash change event is tracked:
$(window).hashchange(_.bind(stepNavigator.handleHash, stepNavigator));

Step navigator JS model run any hash change in next way:
window.location = window.checkoutConfig.checkoutUrl + "#" + code;

But this approach is excess and can be replaced by (via custom theme overriding):
window.location.hash = code;

Exact cause

Wrong hashchange event tracking in progress-bar or incompatibility of such event tracking with next step URL generation.

[veloraven]

@doktorshu thank you for your report.
Please report EE issues via the Support portal of your account or Partner portal if you are a partner reporting on behalf of a merchant.
Github is intended for Community edition reports given no account management for CE users. This will allow for proper tracking of issues at the account level

[pavelshulga]

@veloraven
This problem was found during development of EE project but it's caused by common functionality and can be presented in CE as well.

All the preconditions and steps to reproduce added as well as short issue fix overview so I don't think this issue report needs any update (to prevent its closing in 2 weeks since reporting).

[veloraven]

@doktorshu could you please let me know if you have reported this issue to Support? Just to avoid duplicates and double work.

[pavelshulga]

@veloraven
AFAIK yes, this issue was reported and this thread was used as reference for more information in report.

[SerhiyShkolyarenko]

@doktorshu I tried the steps 1-3 and payment methods were rendered properly. Magento 2.1.2 CE, Apache, without Varnish.
Are you able reproduce the issue on clean Magento CE installation?
Which payment and shipping methods are enabled?

[pavelshulga]

@SerhiyShkolyarenko more detailed description will be provided this weekend.

[ragboyjr]

I've stumbled on this issue as well. Everything @doktorshu provided is 100% correct; however, this issue only happens if your the window.checkoutConfig.checkoutUrl is different than your current actual checkout url.

In my case, I had a custom link that went to /checkout. However, the checkoutConfig.checkout value was /checkout/ so when magento did the window.location = ... the urls are different so that forces an actual reload.

So i think changing the code to set the location.hash would probably be a good move so that it's a bit more flexible on the checkout url, but for anyone else experiencing the issue, just make sure that whatever links you have for checkout match exactly what the window.checkoutConfig.checkoutUrl.

[rossmc]

@ragboyjr agreed, probably best to use just the correct URL.

I believe the code causing the refresh is in Magento_Checkout/js/model/step-navigator::next()

window.location = window.checkoutConfig.checkoutUrl + '#' + code;

it's appending / which changes the path name rather than just setting a location hash, which causes the page to refresh.

[iRabi]

@ragboyjr My page refreshing issue was solved by appending /at end of checkout.