I’m using Magento 2.4.3-p1. I have created a custom checkout step according to Magento’s tutorial here: https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_new_step.html
My step is in between the shipping and payment step. When I go to checkout the shipping step loads fine, but after filling out the address/billing info and select a shipping method my custom step does not load when I click “Next”. I’m using the default Luma theme and don’t have any modules that do anything on the checkout process.
My code is just a copy/paste from the tutorial (other than vendor and module names) so I’m not sure why it doesn’t work. I’m hoping there’s something obvious/simple that I’m missing.
view/frontend/web/js/view/my-step-vew.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,
* <Vendor>_<Module> - is the name of your module directory.
*/
return Component.extend({
defaults: {
template: 'MyVendor_MyModule/mystep'
},
// add here your logic to display step,
// This is the only difference from the tutorial
// I changed it to false from true
isVisible: ko.observable(false),
/**
* @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
'Shipping',
// 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();
}
});
});
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>
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">MyVendor_MyModule/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>
view/frontend/base/requirejs-config.js
var config = {
'config': {
'mixins': {
'Magento_Checkout/js/view/payment': {
'Vendor_Module/js/view/shipping-payment-mixin': true
}
}
}
};
view/web/js/view/shipping-payment-mixin.js
define([
'ko'
], function (ko) {
'use strict';
var mixin = {
initialize: function () {
// set visible to be initially false to have your step show first
this.visible = ko.observable(false);
this._super();
return this;
}
};
return function (target) {
return target.extend(mixin);
};
});
