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>`
  • can you add js code here? So, it'll help others to understand your actual issue. – Emipro Technologies Pvt. Ltd. Apr 23 '18 at 13:13
  • Done. Now check. – Avesh Naik Apr 23 '18 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 '18 at 13:24
  • Marius, everything is correctly done. But still it shows me an error – Avesh Naik Apr 23 '18 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 '18 at 13:43
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.

  • It's Same. I posted my template also. – Avesh Naik Apr 23 '18 at 13:39
  • My bad. I had added extra ' on template side. Thank you for the help – Avesh Naik Apr 23 '18 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. – Emipro Technologies Pvt. Ltd. Apr 23 '18 at 13:45
  • great thank you 1+ Upvote – sumeet bajaj Apr 26 at 11:30

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.