I’m trying to use the checkout step navigator bar in another template.
I tried this but did not work, it just shows buttons:
in phtml.
<div id="steps" data-bind="scope:'steps'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
"#steps": {
"Magento_Ui/js/core/app": {
"components": {
"steps": {
"component": "Vendor_Application/js/steps"
}
}
}
}
}
</script>
Js component:
define((
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator'
), function (ko, Component, _, stepNavigator) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Application/mystep'
},
// 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
'step_1',
// step alias
null,
// step title value
'Step One',
// 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
);
stepNavigator.registerStep(
// step code will be used as step content id in the component template
'step_2',
// step alias
null,
// step title value
'Step Two',
// 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
*/
20
);
return this;
},
/**
* The navigate() method is responsible for navigation between checkout steps
* during checkout. You can add custom logic, for example some conditions
* for switching to your custom step
* When the user navigates to the custom step via url anchor or back button we_must show step manually here
*/
navigate: function () {
this.isVisible(true);
},
/**
* @returns void
*/
navigateToNextStep: function () {
stepNavigator.next();
}
});
});
HTML Template
<li id="step_1" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step One'" 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>
<li id="step_2" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Two'" 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>
Any ideas? or where can I find the template of the step navigator, maybe I can just copy it and assign as template to my js component.
Thanks!
