Magento2: Bug while adding a new step to checkout before Shipping Address

[AlexandreKhayrullin]

Preconditions

1. Magento version 2.1.3
2. PHP version 7.0.15
3. Used browser: Google Chrome

Steps to reproduce

1. Follow this documentation to add a new step at the very beginning of the one-page checkout: http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html
2. Make sure the sort order is 0 in all files.

Expected result

1. A new step is added before "Shipping Address". When a customer composes their cart and proceeds to the checkout, the new step is the first one displayed.

Actual result

1. Both the first step and the shipping address form are displayed simultaneously, with both of their breadcrumbs being active at the same time.
2. Clicking on the first breadcrumb (the one with the new step) fixes the look of the page.

It appears that the bug is due to the fact that while adding the step "Shipping Address" to the checkout (in the file vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js) , the only check to detect whether the form should be displayed by default is done on the quote, whether it is virtual or not (the same condition that tells whether the step should be included at all) . There is nothing to check for existing steps and hide the "Shipping Address" form if a new step is added before it.

[sunel]

You can set the ko.obserable(false) to fix this...

But i am facing a new issue the template file is not called.

[AlexandreKhayrullin]

I did eventually do this, after having spent a day figuring out how it works. I also added a condition where if the hash string is equal to "shipping", then the default component without any extensions is used.

It's a shame that there's a need for a workaround, shouldn't this be working OOTB?

[sunel]

Is your template called ???

[AlexandreKhayrullin]

Yes.

[sunel]

Did u try it in Magento version 2.1.5

[AlexandreKhayrullin]

No, only in 2.1.3 for now.
It's a project I'm doing for work, and I'm not in charge of upgrading Magento on this particular project, so I can't test this with the version,2.1.5 for the time being.

[aur3l10]

Same problem for me.

Preconditions

1. Magento version 2.1.5
2. PHP version 7.0.16
3. Used browser: Google Chrome, Mozilla Firefox, Chromium

[sunel]

I have also referred this isse in devdocs
https://github.com/magento/devdocs/issues/1070

[sunel]

Is there any patch for the issue?

[psyklopz]

Confirmed it's also an issue with:

Preconditions

Magento version 2.1.6
PHP version 5.6.30
Used browser: Google Chrome, Mozilla Firefox

[harrigo]

Also an issue with Magento 2.1.7 however i cannot fix with workaround "ko.obserable(false)" Second step is then shown instead of first.

[andrewli-ca]

I tried the sample mixin code in the dev docs (http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html) but it didnt work out. turns out the sample code is missing a important line.

add the following line to the Vendor_Module/js/view/shipping-payment-mixin file:

this.isVisible = kko.observable(false)

payment.js uses the isVisible variable to store the value if the step should be visible or not. whereas, shipment.js uses the visible variable to do the same.

The sample code in the dev document is missing the line above which is why two steps are activated on the loading of the checkout.

shipping-payment-mixin.js contents:

define(
[
'ko'
], function (ko) {
'use strict';

    var mixin = {

        initialize: function () {

    // this.isVisible variable is used by Magento_Checkout/js/view/payment. this variable is missing from the sample code.
            this.isVisible = ko.observable(false);

    // this.visible variable is used by Magento_Checkout/js/view/shipment.
            this.visible = ko.observable(false);
            this._super();
            return this;
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
}

);

On a side note, remember to change the sort value in the initialize function in my-step-view.js and sortOrder value in checkout_index_index.xml if you want the custom step to be the first step. Hope this helps someone.

[SasiKiranK]

https://github.com/magento/magento2/issues/8875#issuecomment-316922684 is it working?

[magento-engcom-team]

@AlexandreKhayrullin, thank you for your report.
We've created internal ticket(s) MAGETWO-83363 to track progress on the issue.

[natebatty]

andrewli-ca Seems to work unless you are only purchasing downloadable products. Then the payment/review sections still shows up.

[arjun1992]

@andrewli-ca Does this work if only custom step and payment step are involved ?

[krzksz]

Hello everyone, I looked into the issue and I'm going to close it for the following reasons:

• There is an updated guide on adding an extra step which also describes adding mandatory mixins for either shipping or payment step depending where your custom one is added.
• Above was confirmed by us (creativestyle) in one of our modules: https://github.com/magesuite/login-or-guest-checkout-step/tree/1.x/view/frontend/web/js/view which you can try out live here: https://demo.magesuite.io/ so I don't think this issue persists on 2.3.x.
• 2.1.x and 2.2.x have reached their EOL, which means they are not going to receive any non-security patches.

If you feel there is still some work to be done within this issue then please let me know and reopen it and I'll gladly help anyway I can.