0

I added new checkout step using official doc , i need to display my step in between shipping and payment.
As per the documentation To display step content between shipping step and payment step 1 < "sortOrder" < 2 so I have added following code

checkout_index_index.xml

<item name="my-new-step" xsi:type="array">
    <item name="component" xsi:type="string">Amsi_UserManagement/js/view/select-student-view</item>
    <item name="sortOrder" xsi:type="string">2</item>
    <item name="children" xsi:type="array">
    </item>
</item>

Amsi_UserManagement/view/frontend/web/js/view/select-student-view.js

initialize: function () {
    this._super();
    stepNavigator.registerStep(
        'select_student_step',
        null,
        'Select Student',
        this.isVisible,
        _.bind(this.navigate, this),
        15
    );

    return this;
}

this creates my steps like this

enter image description here

when I click NEXT in shipping method it directly taking me to the payment page, that is weird. Any idea?

1

Solved!

To avoid mixed steps views, I just changed this:

isVisible: ko.observable(true)

For this:

isVisible: ko.observable(false)

Edit

My step is coming in between shipping and payment step, so while the cart item is virtual both select-student and payment will be active at the same time. To overcome that i need to over write the logic of Magento_Checkout/js/view/payment. So I extended it using view/base/requirejs-config.js file

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/view/payment':
                'Amsi_UserManagement/js/view/payment'
        }
    }
};

in new payment.js file I added

isVisible: checkVisible(),

function checkVisible() {
   if(quote.isVirtual() && !stepNavigator.stepCodes.length)
       return ko.observable(true);
  else
      return ko.observable(false);
 }

also I changed my-step

isVisible: checkVisible(),
    function checkVisible() {
        if(quote.isVirtual() && !stepNavigator.stepCodes.length)
            return ko.observable(true);
        else
            return ko.observable(false);
    }

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.