Sometimes we need to integrate or create a new step or tab in the checkout. We can able to achieve it through a custom Magento module.
Create a layout file in the extension folder
Ex: vendor/Extension/view/frontend/layout/checkout_index_index
<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">
<item name="Cart" xsi:type="array">
<item name="component" xsi:type="string">NorthBrisbane_Checkout/js/view/checkout/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="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="afterMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="back-button" xsi:type="array">
<item name="sortOrder" xsi:type="string">35</item>
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>On the layout file, sort order key is meant by the position of the tab in the checkout. Sort order 1 will move the new step to the first tab of the checkout section.
On the layout file itself there is a section named content in the item tag. Where we will set the path of the js file that need to render once this layout will be loaded.
Ex: vendor/Extension/view/frontend/web/template/checkout/new-step.
define(
[
'jquery',
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Ui/js/modal/modal',
'mage/url',
'Magento_Checkout/js/model/quote',
'Magento_Catalog/js/price-utils',
'Magento_Checkout/js/model/totals',
'Magento_Customer/js/customer-data',
'mage/translate',
'sidebar'
],
function (
$,
ko,
Component,
_,
stepNavigator,
modal,
url,
quote,
priceUtils,
totals,
customerData
) {
'use strict';
/**
*
* mystep - is the name of the component's .html template,
* my_module - is the name of the your module directory.
*
*/
return Component.extend({
defaults: {
template: 'NorthBrisbane_Checkout/checkout/mystep'
},
//add here your logic to display step,
isVisible: ko.observable(false),
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
//step code will be used as step content id in the component template
'cart',
//step alias
'cart',
//step title value
'Cart',
//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
*/
1
);
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 () {
var self = this;
//getPaymentInformation().done(function () {
self.isVisible(true);
// });
},
navigateToNextStep: function () {
stepNavigator.next();
},
});
Inside the JS file we will be used the template file need to be loaded when the JS rendered after.
So we can link that template file path on the JS file.
And create the layout file on the web/templates folder. Also need to remember the template files inside the JS will be knowckout files and it is HTML files.
Ex:Vendor/Extension/view/frontend/web/templatenew-step.html
Inside the HTML file, we can develop the structure of the page that needs to be shown.