Reading list Switch to dark mode

    Custom Checkout step in Magento 2

    Updated 17 November 2022

    Hello,

    This topic will cover how to add a custom checkout step in Magento 2. Also, learn about Magento 2 B2B multi-step checkout process to how it is useful for business buyers.

    Steps:

    1> Create a checkout step component.

    2> Add our custom step into the checkout step Layout.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Step1: Create a checkout step component.

    A> For creating a custom checkout step, first we have to create a (.js) file that implements the new step.

    The JS file must be stored under the <your_module_dir>/view/frontend/web/js/view directory.

    Check the following code with comments (custom-step.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,
         * Webkul_CheckoutCustomSteps  - is the name of your module directory.
         */
        return Component.extend({
            defaults: {
                template: 'Webkul_CheckoutCustomSteps/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_code',
                    // step alias
                    null,
                    // step title value
                    'Custom Step',
                    // 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();
            }
        });
    });

    B> Add a HTML template

    Create a .html (mystep.html) template under the <your_module_dir>/view/frontend/web/template directory.

    <!--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: 'Custom Step'" 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">
                        <input type="text" placeholder="Custom Field" class="form-control"/>
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                            <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </li>

    Step2: Add our custom step into the checkout step Layout.

    The new step to be displayed on the page, we need to declare it in the Checkout page layout, which is defined in checkout_index_index.xml.

    <?xml version="1.0"?>
    <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 for last step -->
                                        <item name="reviewstep" xsi:type="array">
                                            <item name="component" xsi:type="string">Webkul_CheckoutCustomSteps/js/view/custom-step</item>
                                            <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>
    </page>

    That’s it, Now we can check after cache: flush.

    Output:

    custom checkout step magento2

    We have created a textbox and a next button on the custom steps.

    custom checkout step magento2

    This is the easiest way to create a custom step in checkout in the Magento2.

    Happy Coding !!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home