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.
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>`
shipping-method
.