Most of the store owners are worried about look & feel of the store frontend and they forget about the most important area which is checkout because it is a route for turning your store visitor into a customer. But as business varies the required customer information is also vary depending on the business type at that time using the default checkout process will not help you out. Also, Cart abandonment is one of the largest problems facing by the store owners. In fact, it costs merchants roughly 2-4 trillion dollars per year. So, you need to optimize your store checkout process by removing the unnecessary field and adding required fields.
Using the most powerful CMS Magento 2, it allows you to customize your checkout process and add your own step between the shipping and review payment part. Let’s do this using one example, here we have added one instruction step before placing an order and forwarding the customer further the payment section in Magento 2 store. Also, install Custom Checkout Fields which helps the store admin customize the checkout page by adding extra fields.
Firstly, we need create “checkout_index_index.xml” for adding custom checkout step at this path.
app\code\Vendor\Extension\frontend\view\layout\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 -->
<item name="check-login-step" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Extension/js/view/checkout-new-step
</item>
<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>
In above code, we have added one step in checkout after Shipping Step. Here are some scenarios if you want to change your step position in checkout process.
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
In next step, we need to create one Js file inside our Frontend Web Folder.
app\code\Vendor\Extension\view\frontend\web\js\view\checkout-new-step.js
define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Checkout/js/model/full-screen-loader',
'mage/storage',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/action/get-totals',
'Magento_Checkout/js/model/totals',
'Magento_Checkout/js/model/cart/totals-processor/default',
'Magento_Checkout/js/model/cart/cache'
],
function (ko,
Component,
_,
stepNavigator,
fullScreenLoader,
storage,
customer,
quote,
rateRegistry,
totals,
getTotalsAction,
defaultTotal,
cartCache) {
'use strict';
/**
* check-login - is the name of the component's .html template
*/
return Component.extend({
defaults: {
template: ‘Vendor_Extension/check-new’
},
//add here your logic to display step,
isVisible: ko.observable(true),
isVisibleDrop: ko.observable(false),
isLogedIn: customer.isLoggedIn(),
//step code will be used as step content id in the component template
stepCode: 'newstep',
//step title value
stepTitle: "New Step",
/**
*
* @returns {*}
*/
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
this.stepCode,
//step alias
null,
this.stepTitle,
//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;
},
isStepDisplayed: function () {
return true;
},
/**
* 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();
}
});
}
);
Now in this last Step, we need to create one more html file at this path.
app\code\Vendor\Extension\view\frontend\web\js\view\check-new.html
<!--Use 'stepCode' as id attribute-->
<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
<div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>
<div id="checkout-step-title"
class="step-content delivery-option-master"
data-role="content">
<div class="fieldset">
<span><!-- ko i18n: 'New Step Added'--><!-- /ko --></span>
</div>
</div>
</li>
Tadaa! You have successfully added your custom step in Magento 2 checkout process. If you found this blog helpful, don’t forget to share it with your colleagues and Magento Friends.
And, Let us know if you are facing an issue while implementing this code.
Happy Coding!
