0

I'm using Magento 2.4.3-p1. I have created a custom checkout step according to Magento's tutorial here: https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_new_step.html

My step is in between the shipping and payment step. When I go to checkout the shipping step loads fine, but after filling out the address/billing info and select a shipping method my custom step does not load when I click "Next". I'm using the default Luma theme and don't have any modules that do anything on the checkout process.

My code is just a copy/paste from the tutorial (other than vendor and module names) so I'm not sure why it doesn't work. I'm hoping there's something obvious/simple that I'm missing.

view/frontend/web/js/view/my-step-vew.js

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

    /**
     * mystep - is the name of the component's .html template,
     * <Vendor>_<Module>  - is the name of your module directory.
     */
    return Component.extend({
        defaults: {
            template: 'MyVendor_MyModule/mystep'
        },

        // add here your logic to display step,
        // This is the only difference from the tutorial
        // I changed it to false from true
        isVisible: ko.observable(false),

        /**
         * @returns {*}
         */
        initialize: function () {
            this._super();

            // register your step
            stepNavigator.registerStep(
                // step code will be used as step content id in the component template
                'step_code',
                // step alias
                null,
                // step title value
                'Shipping',
                // 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
            );

            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();
        }
    });
});

view/frontend/web/template/mystep.html

<!--The 'step_code' value from the .js file should be used-->
<li id="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>

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="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">MyVendor_MyModule/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">2</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>
</page>

view/frontend/base/requirejs-config.js

var config = {
    'config': {
        'mixins': {
           'Magento_Checkout/js/view/payment': {
               'Vendor_Module/js/view/shipping-payment-mixin': true
           }
       }
    }
};

view/web/js/view/shipping-payment-mixin.js

define([
    'ko'
], function (ko) {
    'use strict';

    var mixin = {

        initialize: function () {
            // set visible to be initially false to have your step show first
            this.visible = ko.observable(false);
            this._super();

            return this;
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});

1 Answer 1

0

Turns out that one of my third party modules was the issue this whole time. Disabled it and it works fine.

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.