1

I have a custom checkout step that i want to try and disable if i have no products in my crosssell however i cant figure out how to disable the step in below code:

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

        //add here your logic to display step,
        isVisible: ko.observable(true),

        /**
        *
        * @returns {*}
        */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'crosssell_step',
                //step alias
                null,
                //step title value
                'Interested in?',
                //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
                */
                5
            );

            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 () {

        },

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

There are sections for logic to display step but simply setting this to false does not seem to work.

  • change isVisible: ko.observable(true) to false for disable step – Prince Patel May 12 '17 at 11:02
  • This is what i thought but doesn't seem to work? – harri May 12 '17 at 11:04
  • Try self.visible(false); after stepNavigator.registerStep() – Prince Patel May 12 '17 at 11:08
  • hmm i did like so but broke page: – harri May 12 '17 at 11:21
  • stepNavigator.registerStep( self.visible(false); – harri May 12 '17 at 11:21
3

You should stop register your custom step on stepNavigator.registerStep() if your conditions are not met

if(!YourCondition){
    stepNavigator.registerStep(
        //step code will be used as step content id in the component template
        'crosssell_step',
        //step alias
        null,
        //step title value
        'Interested in?',
        //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
        */
        5
    );
}
  • 1
    Not had much luck with this either. Whole thing seeming buggy however with multiple steps showing on first tab when i add a custom step. – harri May 22 '17 at 8:41

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.