Tag: magento2

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!