0

I have created a custom checkout step before the shipping step and its working fine. Now my requirement is that I have to make the custom checkout step as inactive and whenever I proceed to checkout, I want to show the shipping step as active and not my custom step.

Please guide me.

Improve this question
2
  • 1
    you might need to provide more info. also if your custom step is Before the shipping step it sounds like it Should be active first.Normally the step that is active comes first and the others are inactive until the previous steps are filled out. wouldn't making your custom step show after the shipping step fix the problem? – bjornredemption Dec 9 '20 at 11:55
  • As @bjorn told, Just put the custom step after the shipping set. You cant make it inactive it it comes first. – Black Dec 11 '20 at 10:27
0

This guide on dev doc is quite easy to understand. Magento https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_new_step.html

But you need change it a bit. Normally the app/code/Magento/Checkout/view/frontend/web/js/view/progress-bar.js decided where step to land while initialize the checkout, but for sure this cannot be overriden or extended using mixin on requirejs-config.js, so we need to add it to our custom checkout_index_index.xml

app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">

                            <item name="progressBar" xsi:type="array">
                                <item name="sortOrder" xsi:type="string">0</item>
                                <item name="component" xsi:type="string">Vendor_Module/js/view/progress-bar</item>
                                <item name="displayArea" xsi:type="string">progressBar</item>
                                <item name="config" xsi:type="array">
                                    <item name="deps" xsi:type="array">
                                        <item name="0" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
                                        <item name="1" xsi:type="string">checkout.steps.billing-step.payment</item>
                                    </item>
                                </item>
                            </item>

                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <!-- The new step you add -->
                                    <item name="my-new-step" xsi:type="array">
                                        <item name="component" xsi:type="string">Vendor_Module/js/view/my-step-view</item>
                                        <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                        <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                        <!--To display step content after payment step "sortOrder" > 2 -->
                                        <item name="sortOrder" xsi:type="string">1</item>
                                        <item name="children" xsi:type="array">
                                            <!--add here child component declaration for your step-->
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

See this line:

stepNavigator.setHash(stepsValue.sort(stepNavigator.sortItems)[1].code);

app/code/Vendor/Module/view/frontend/web/js/view/progress-bar.js

    define([
    'jquery',
    'underscore',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/step-navigator'
], function ($, _, ko, Component, stepNavigator) {
    'use strict';

    var steps = stepNavigator.steps;

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/progress-bar',
            visible: true
        },
        steps: steps,

        /** @inheritdoc */
        initialize: function () {
            var stepsValue;

            this._super();
            window.addEventListener('hashchange', _.bind(stepNavigator.handleHash, stepNavigator));

            if (!window.location.hash) {
                stepsValue = stepNavigator.steps();

                if (stepsValue.length) {
                    /**
                     * Here is the initialize step you want to land in as in the sorted steps 0,1,2
                     * Assume your step is 0 as the 1st and shipping as 1 for 2nd place
                     */
                    stepNavigator.setHash(stepsValue.sort(stepNavigator.sortItems)[1].code);
                }
            }

            stepNavigator.handleHash();
        },

        /**
         * @param {*} itemOne
         * @param {*} itemTwo
         * @return {*|Number}
         */
        sortItems: function (itemOne, itemTwo) {
            return stepNavigator.sortItems(itemOne, itemTwo);
        },

        /**
         * @param {Object} step
         */
        navigateTo: function (step) {
            stepNavigator.navigateTo(step.code);
        },

        /**
         * @param {Object} item
         * @return {*|Boolean}
         */
        isProcessed: function (item) {
            return stepNavigator.isProcessed(item.code);
        }
    });
});

Remove Vendor/Module/view/base/requirejs-config.js as no mixin for Magento_Checkout/js/view/shipping, Magento_Checkout/js/view/payment

Improve this answer

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.