I'm currently working on a extension to customize the default Magento 2 checkout. In the first step of the checkout, there is a address form and a block for the shipping methods. I want to seperate those 2 functionalities into 2 individual steps. That will result in a checkout with the steps: 'address > shipping > payment'.

I created a new step and set it as second step according to the dev docs: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

I've copied the shipping method html from the file module-checkout/view/frontend/web/template/shipping.html to my custom step html file. I also copied the functionality of the shipping method html to my custom step js file.

But now is the shipping method block visible on all 3 steps, while it only has to be visible on the second step. This is a part of my custom step js file:

return Component.extend({
        defaults: {
            template: 'VENDOR_MODULE/custom-step',
            shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',
            shippingMethodItemTemplate: 'Magento_Checkout/shipping-address/shipping-method-item'

        visible: ko.observable(!quote.isVirtual()),
        isVisible: ko.observable(quote.isVirtual()),
        isLoading: shippingService.isLoading,
        rates: shippingService.getShippingRates(),
        errorValidationMessage: ko.observable(false),

        initialize: function () {

            // register the step
                // step code will be used as step content id in the component template
                // step alias
                // step title value
                'Custom Step',
                // observable property with logic when to display the step or hide the step

                _.bind(this.navigate, this),

                 * sort order value
                 * 'sort order value' < 10: step displays before shipping step;
                 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                 * 'sort order value' > 20 : step displays after payment step

            return this;

        navigate: function () {
            var self = this;

            getPaymentInformation().done(function () {

How can I show the custom step block only on the second step? Or is there a better way to separate the first step into 2 steps?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.