I've added a new step to checkout based on https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_new_step.html and is working good.
What I want to do next is to move the authentication section from shipping step to the newly created step. I've called it "Login" step.
I've added to login step
<?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="authentication" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="login" xsi:type="array">
<item name="sortOrder" xsi:type="string">1</item>
<item name="component" xsi:type="string">Custom_AdvancedCheckout/js/view/checkout-login-step</item>
<item name="children" xsi:type="array">
<item name="authentication" xsi:type="array">
<item name="sortOrder" xsi:type="string">1</item>
<item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
<item name="children" xsi:type="array">
<!--Additional authentication fields-->
<item name="errors" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
<item name="displayArea" xsi:type="string">messages</item>
</item>
</item>
</item>
</item>
</item>
<item name="shipping-step" xsi:type="array">
And to the template file
<li id="login" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Login'" data-role="title"></div>
<div id="checkout-step-title"
class="step-content"
data-role="content">
<!-- ko foreach: getRegion('authentication') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<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>
And my js file
define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator'
],
function (
ko,
Component,
_,
stepNavigator
) {
'use strict';
return Component.extend({
defaults: {
template: 'Custom_AdvancedCheckout/check-login'
},
//add here your logic to display step,
isVisible: ko.observable(true),
/**
*
* @returns {*}
*/
initialize: function () {
this._super();
stepNavigator.registerStep(
'login',
null,
'Login',
this.isVisible,
_.bind(this.navigate, this),
9
);
return this;
},
navigate: function () {
this.isVisible(true);
},
/**
* @returns void
*/
navigateToNextStep: function () {
stepNavigator.next();
}
});
}
);
And is not showing the form.
What I understand is that I have to add the authentication to this step and remove it from step shipping.
Can someone help me with a hint?
