0

Url ex: http://magentotest.dev/checkout

This is my problems:

enter image description here

How can I fix it?

1

Here is the solution which worked for us

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        /**
        *
        * newcheckout - is the name of the component's .html template, 
        * MD_Newcheckoutstep  - is the name of the your module directory.
        * 
        */
        return Component.extend({
            defaults: {
                template: 'MD_Newcheckoutstep/newcheckout'
            },

            //add here your logic to display step,
            // I have given false here so that is will no merge with other step
            // if you make it true sometime happens that is merge with shipping step.
            visible: ko.observable(quote.isVirtual())

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'newcheckoutstep',
                    //step alias
                    null,
                    //step title value
                    'New Checkout Step',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.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
                    */
                    15
                );

                return this;
            },

            /**
            * The navigate() method is responsible for navigation between checkout step
            * during checkout. You can add custom logic, for example some conditions
            * for switching to your custom step 
            */
            navigate: function () {
               self.visible(true);
            },

            /**
            * @returns void
            */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

Here is more detail about this solution on my own blog

0

Unless you have added "New Step" yourself, this just means that you are at step 2 "Shipping". Without posting what you have written, we won't be able to tell what is wrong but I suggest you have a look at calling the CSS class in your code: .opc-progress-bar-item._active

  • Yes. I was add new step at first step. So I want my new step is active and Shipping is not active when I go to checkout page. It's so difficult for me. Can you send me example for this? – Bod Sep 21 '16 at 2:15
  • 1
    I have just fixed my problem. I was custom file /js/view/shipping.js. Edit visble in initialize function: visible: ko.observable(quote.isVirtual()) And add set visible = true in navigate function. navigate: function () { //load data from server for shipping step var self = this; self.visible(true); }, thank you for your interest. – Bod Sep 21 '16 at 4:35
0

I had the same problem and this is how I solved it. Shipping step is marked as visible because it is the first one by default, so the solution is to change its visible property to false.

I used a Javascript mixin instead of overwriting the whole file:

Declare Mixin: Vendor/Module/view/base/requirejs-config.js

var config = {
'config': {
    'mixins': {
        'Magento_Checkout/js/view/shipping': {
            'Vendor_Module/js/view/shipping-mixin': true
        }
    }
}

};

The mixin file: Vendor/Module/view/frontend/web/js/view/shipping-mixin.js

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

    var mixin = {

        initialize: function () {
            this.visible = ko.observable(false); //set visible to be initially false
            this._super();

            return this;
        }
    };

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

Additionally, you have to do the same for payment as that is the first step on virtual orders.

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.