In this i want one custom checkout step can having only shipping methods inside the step means shipping address and Shipping methods are on different steps on checkout page.
So, Please can anyone have idea than share with me.
2 Answers
For Creating Custom Step: Magento 2: New Checkout step – Shipping Method prices not showing
Add Shipping Method Section to newly created Step: Magento 2 How to remove shipping method in checkout page
Removing shipping method Section from default shipping step: https://stackoverflow.com/questions/50664015/disable-shipping-methods-in-magento-2#:~:text=To%20disable%20any%20shipping%20method,and%20click%20save%20config%20button
Vendor\Module\view\frontend\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">
<item name="email-step" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/email</item>
<item name="sortOrder" xsi:type="string">0</item>
<item name="children" xsi:type="array">
<item name="customer-email" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
<item name="template" xsi:type="string">Vendor_Module/form/element/email</item>
<item name="displayArea" xsi:type="string">login-methods</item>
<item name="tooltip" xsi:type="array">
<item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
</item>
<item name="children" xsi:type="array">
<item name="before-login-form" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">before-login-form</item>
<item name="children" xsi:type="array">
<!-- before login form fields -->
</item>
</item>
<item name="additional-login-form-fields" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">additional-login-form-fields</item>
<item name="children" xsi:type="array">
<!-- additional login form fields -->
</item>
</item>
</item>
</item>
</item>
</item>
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="customer-email" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Vendor\Module\view\frontend\web\js\view\email.js
define([
'jquery',
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/customer-data',
'Magento_Customer/js/model/customer',
'mage/translate',
'Vendor_Module/js/bindings/transitions'
], function ($, ko, Component, _, stepNavigator, customerData, customer, $t) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/email'
},
loginFormSelector: 'form[data-role=email-with-possible-login]',
isVisible: ko.observable(!customer.isLoggedIn()),
initialize: function () {
this._super();
stepNavigator.registerStep('email', null, $t('Email'), this.isVisible, _.bind(this.navigate, this), 5);
return this;
},
navigate: function () {
if (customer.isLoggedIn()) {
this.navigateToNextStep();
} else {
this.isVisible(true);
}
},
validateEmail: function () {
var emailValidationResult = customer.isLoggedIn();
if (!customer.isLoggedIn()) {
$(this.loginFormSelector).validation();
emailValidationResult = Boolean($(this.loginFormSelector + ' input[name=username]').valid());
}
return emailValidationResult;
},
navigateToNextStep: function () {
var currentStep = stepNavigator.getActiveItemIndex();
if (this.validateEmail() && stepNavigator.steps()[currentStep].code == 'email') {
stepNavigator.next();
} else {
$(this.loginFormSelector + ' input[name=username]').focus();
}
}
});
});
Vendor\Module\view\frontend\web\js\bindings\transitions.js
define([
'jquery',
'ko'
], function ($, ko) {
'use strict';
/**
* Hide an element immediately and fade in with a configurable value.
*/
ko.bindingHandlers.fadeVisible.update = function (element, valueAccessor) {
var value = valueAccessor();
ko.unwrap(value) ? $(element).fadeIn(window.checkoutConfig.stepTransitionSpeed) : $(element).hide();
};
});
Vendor\Module\view\frontend\web\template\email.html
<li id="email" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Email'" data-role="title"></div>
<div id="checkout-step-title"
class="step-content"
data-role="content">
<each args="getRegion('login-methods')" render="" />
<form data-bind="submit: navigateToNextStep" class="form-next-step" 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>
Vendor\Module\view\frontend\web\template\form\element\email.html
<!-- ko ifnot: isCustomerLoggedIn() -->
<!-- ko foreach: getRegion('before-login-form') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<form class="form form-login" data-role="email-with-possible-login"
data-bind="submit:login"
method="post">
<fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
<div class="field required">
<label class="label" for="customer-email">
<span data-bind="i18n: 'Email Address'"></span>
</label>
<div class="control _with-tooltip">
<input class="input-text"
type="email"
data-bind="
textInput: email,
hasFocus: emailFocused"
name="username"
data-validate="{required:true, 'validate-email':true}"
id="customer-email" />
<!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
<span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
</div>
</div>
<!--Hidden fields -->
<fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
<div class="field">
<label class="label" for="customer-password">
<span data-bind="i18n: 'Password'"></span>
</label>
<div class="control">
<input class="input-text"
data-bind="
attr: {
placeholder: $t('optional'),
}"
type="password"
name="password"
id="customer-password"
data-validate="{required:true}" autocomplete="off"/>
</div>
</div>
<!-- ko foreach: getRegion('additional-login-form-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="actions-toolbar">
<input name="context" type="hidden" value="checkout" />
<div class="primary">
<button type="submit" class="action login" data-action="checkout-method-login"><span data-bind="i18n: 'Login'"></span></button>
</div>
</div>
<div class="secondary">
<span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'"></span><br>
<a class="action remind" data-bind="attr: { href: forgotPasswordUrl }">
<span data-bind="i18n: 'Forgot Your Password?'"></span>
</a>
</div>
</fieldset>
<!--Hidden fields -->
</fieldset>
</form>
<!-- /ko -->
