This guide on dev doc is quite easy to understand.
Magento https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_new_step.html
But you need change it a bit.
Normally the app/code/Magento/Checkout/view/frontend/web/js/view/progress-bar.js decided where step to land while initialize the checkout, but for sure this cannot be overriden or extended using mixin on requirejs-config.js, so we need to add it to our custom checkout_index_index.xml
app/code/Vendor/Module/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="progressBar" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<item name="component" xsi:type="string">Vendor_Module/js/view/progress-bar</item>
<item name="displayArea" xsi:type="string">progressBar</item>
<item name="config" xsi:type="array">
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
<item name="1" xsi:type="string">checkout.steps.billing-step.payment</item>
</item>
</item>
</item>
<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">Vendor_Module/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">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>
See this line:
stepNavigator.setHash(stepsValue.sort(stepNavigator.sortItems)[1].code);
app/code/Vendor/Module/view/frontend/web/js/view/progress-bar.js
define([
'jquery',
'underscore',
'ko',
'uiComponent',
'Magento_Checkout/js/model/step-navigator'
], function ($, _, ko, Component, stepNavigator) {
'use strict';
var steps = stepNavigator.steps;
return Component.extend({
defaults: {
template: 'Magento_Checkout/progress-bar',
visible: true
},
steps: steps,
/** @inheritdoc */
initialize: function () {
var stepsValue;
this._super();
window.addEventListener('hashchange', _.bind(stepNavigator.handleHash, stepNavigator));
if (!window.location.hash) {
stepsValue = stepNavigator.steps();
if (stepsValue.length) {
/**
* Here is the initialize step you want to land in as in the sorted steps 0,1,2
* Assume your step is 0 as the 1st and shipping as 1 for 2nd place
*/
stepNavigator.setHash(stepsValue.sort(stepNavigator.sortItems)[1].code);
}
}
stepNavigator.handleHash();
},
/**
* @param {*} itemOne
* @param {*} itemTwo
* @return {*|Number}
*/
sortItems: function (itemOne, itemTwo) {
return stepNavigator.sortItems(itemOne, itemTwo);
},
/**
* @param {Object} step
*/
navigateTo: function (step) {
stepNavigator.navigateTo(step.code);
},
/**
* @param {Object} item
* @return {*|Boolean}
*/
isProcessed: function (item) {
return stepNavigator.isProcessed(item.code);
}
});
});
Remove Vendor/Module/view/base/requirejs-config.js as no mixin for Magento_Checkout/js/view/shipping, Magento_Checkout/js/view/payment