0

I am getting following error.

Uncaught TypeError: Cannot read property 'top' of undefined at step-navigator.js:158

I have created a custom step using Magento 2 documentation

http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

I have added a new step for shipping and payment. When I am going to my custom step and click back on shipping. I get this error and both the step get displayed and selected.

enter image description here

        isVisible: ko.observable(false),
        errorValidationMessage: ko.observable(false),
        stepCode: 'shipping-method',
        stepTitle: 'Shipping Method',


        initialize: function () {
            this._super();

            stepNavigator.registerStep(
                this.stepCode,

                null,
                this.stepTitle,

                this.isVisible,

                _.bind(this.navigate, this),

                15
            );

            return this;
        },


        navigate: function () {

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        },

Template

     <li id="shipping-method'"
       class="checkout-shipping-method"
       data-bind="fadeVisible: isVisible, blockLoader: isLoading"
     role="presentation">
     <div class="checkout-shipping-method">
    <div class="step-title"
         translate="'Shipping Methods'"
         data-role="title" />

    <each args="getRegion('before-shipping-method-form')" render="" />

    <div id="checkout-step-shipping_method"
         class="step-content"
         data-role="content"
         role="tabpanel"
         aria-hidden="false">
        <form id="co-shipping-method-form"
              class="form methods-shipping"
              if="rates().length"
              submit="setShippingInformation"
              novalidate="novalidate">

            <render args="shippingMethodListTemplate"/>

            <div id="onepage-checkout-shipping-method-additional-load">
                <each args="getRegion('shippingAdditional')" render="" />
            </div>
            <div role="alert"
                 if="errorValidationMessage().length"
                 class="message notice">
                <span text="errorValidationMessage()" />
            </div>
            <div class="actions-toolbar" id="shipping-method-buttons-container">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span translate="'CONTINUE TO PAYMENT INFORMATION'" />
                    </button>
                </div>
            </div>
        </form>
        <div class="no-quotes-block"
             ifnot="rates().length > 0"
             translate="'Sorry, no quotes are available for this order at this time'" />
    </div>
  </div>
</li>`
5
  • can you add js code here? So, it'll help others to understand your actual issue. Apr 23, 2018 at 13:13
  • Done. Now check.
    – Avesh Naik
    Apr 23, 2018 at 13:21
  • Make sure that in the template that is rendering your shipping methods step, the top element has the id the same as your shipping step code shipping-method.
    – Marius
    Apr 23, 2018 at 13:24
  • Marius, everything is correctly done. But still it shows me an error
    – Avesh Naik
    Apr 23, 2018 at 13:34
  • @Marius you are right. My mistake was, i Added one extra ' on template side which was creating problem.
    – Avesh Naik
    Apr 23, 2018 at 13:43

1 Answer 1

1

Step Code should be same on your js and html templete file.

Make sure stepCode: 'your_step_code' is same as you mention on your template file.

isVisible: ko.observable(false),
        errorValidationMessage: ko.observable(false),
        stepCode: 'your_step_code',
        stepTitle: 'Shipping Method',


        initialize: function () {
            this._super();

            stepNavigator.registerStep(
                this.stepCode,

                null,
                this.stepTitle,

                this.isVisible,

                _.bind(this.navigate, this),

                15
            );

            return this;
        },


        navigate: function () {

        },


        navigateToNextStep: function () {
            stepNavigator.next();
        },

The your_step_code value from the .js file should be used.

<li id="your_step_code" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Hope it'll help you.

4
  • It's Same. I posted my template also.
    – Avesh Naik
    Apr 23, 2018 at 13:39
  • My bad. I had added extra ' on template side. Thank you for the help
    – Avesh Naik
    Apr 23, 2018 at 13:44
  • I think the issue is on id shipping-method' you have added on id with '. That was the issues. it should be shipping-method. Apr 23, 2018 at 13:45
  • great thank you 1+ Upvote Apr 26, 2019 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.