Blank page at the checkout 'shipping' step

[alexpoletaev]

Preconditions

1. Vanilla Magento instance (2.1.x or 2.2.0)
2. Deployed sample data

Steps to reproduce

1. Add any product to the cart as a guest user
2. Proceed to the checkout
3. Fill address and customer data
4. Proceed to the payment step
5. Click 'Shipping' in the progress bar to return to the shipping step
6. Click next and proceed again to the payment step
7. Click 'back' button in the browser

Expected result

1. The customer is redirected to shipping step and is able to change address data.

Actual result

1. The shipping step (page) is blank.
   

Also if you click 'back' button in the browser instead of step 5, nothing will happen. I think that it's not acceptable too.

The problem is how Magento handles the URL hash in the handleHash method here:
vendor/magento/module-checkout/view/frontend/web/js/model/step-navigator.js

A possible workaround is to create a mixin for this JS file and override the handleHash method:

define([
    'mage/utils/wrapper'
], function (wrapper) {
    'use strict';

    return function (stepNavigator) {
        stepNavigator.handleHash = wrapper.wrap(stepNavigator.handleHash, function (originalAction, event) {
            var hashString = window.location.hash.replace('#', '');
            if (hashString == ''
                && typeof event != 'undefined'
                && typeof event.originalEvent.oldURL != 'undefined'
                && event.originalEvent.oldURL.substring(event.originalEvent.oldURL.indexOf('#') + 1) == 'payment'
            ) {
                stepNavigator.navigateTo('shipping');
            }
            originalAction(event);
        });

        return stepNavigator;
    };
});

[magento-engcom-team]

@alexpoletaev, thank you for your report.
The issue is already fixed in develop branch
But we will consider to backport the fix to patch releases

[alexpoletaev]

@magento-engcom-team thank you for your feedback!

[ihor-sviziev]

@magento-engcom-team where it was fixed? How can we find fix for this issue? I think it's really important to fix it ASAP because it's checkout, most important thing in ecommerce. If we will have info how it was fixed - someone could do backport for it.

[alexpoletaev]

I agree, @magento-engcom-team could you please provide a link to commit with the fix? I didn't find any changes in the vendor/magento/module-checkout/view/frontend/web/js/model/step-navigator.js file and I want to know how it was fixed. Thanks.

[okorshenko]

The issue has been fixed in 2.2-develop branch. Will be available with 2.2.2 release

[kapil019]

This is because of hash change in file step-navigator.js, when code is blank. This is refreshing page instead of hash change.

web/js/model/step-navigator.js

OLD CODE

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

This should be

window.location.hash = code;

[ihor-sviziev]

@kapil019 are you able to reproduce this issue in 2.2? If yes - please create issue on that with steps to reproduce.

[kapil019]

@ihor-sviziev I am using 2.1 and this is getting reproduce when new customer comes to order, After adding shipping address he/she redirected to billing address page and address got blank.

This comes only first time for new user, If he fill address again and submit. this will not reproduced. To reproduce again do not place order/logout and do same steps again.

In 2.2 there would be same steps

[ihor-sviziev]

@kapil019 This issue marked as fixed in 2.2 with following PR: #11958
If you're interested - you could create backport PR of these changes to 2.1-develop branch and they will be available in one of next 2.1 patch releases.

[kapil019]

OK @ihor-sviziev I will do this in 2.1-develop branch.