How to add a new checkout step and sample file in Magento 2

Magento new checkout step

How to add a new checkout step and sample file in Magento 2: As you know, Magento 2 is the next breakthrough of Magento after the introduction of Magento 1. In this article, we will guide you how to add a new checkout step and sample file in Magento 2 that you maybe do not know.

The default Magento 2 Checkout includes two steps:

  • Shipping Information
  • Review and Payments Information

If you want to add a custom checkout step, I need to implement as a UI component.

Today, I will describe how to create the front-end part of the component, implementing a Magento checkout step and how to add it to the checkout flow.

How to add a new checkout step and sample file in Magento 2

Step 1: Create module

Step 2: Create file

“app\code\Namespace\Module_Name\view\frontend\web\js\view\new-step.js” with content:

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,
* your_module_dir - is the name of the your module directory.
*
*/
return Component.extend({
defaults: {
template: 'your_module_dir/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
'Step Title',
//observable property with logic when display step or hide step
this.isVisible,</code>
<code>
_.bind(this.navigate, this),
/**
* sort order value
* 'sort order value' &lt; 10: step displays before shipping step;
* 10 &lt; 'sort order value' &lt; 20 : step displays between shipping and payment step * 'sort order value' &gt; 20 : step displays after payment step
*/
15
);
return this;
},
/**
* The navigate() method is responsible for navigation between checkout step
* during checkout. You can add custom logic, for example some conditions
* for switching to your custom step
*/
navigate: function () {
},
/**
* @returns void
*/
navigateToNextStep: function () {
stepNavigator.next();
}
});
}
);

Step 3: Create the file

“app\code\Namespace\Module_Name\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>



Step 4: Create the file

“app\code\Namespace\Module_Name\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">Magento_Your_Module_Name/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>

Now, please run command: php bin/magento setup:static-content:deploy and check your checkout page. for any issue review on this post.

Leave a reply:

Your email address will not be published.

Site Footer