- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How to split shipping checkout step into two steps?
Hi,
I'm trying to split up the shipping checkout step into two. The first one is for shipping and billing addresses and the second one is for shipping methods only. How do I accomplish this?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: How to split shipping checkout step into two steps?
Hello @seanleewir2662
Develop a custom layout for the checkout.
Create a custom module, or adjust your theme to modify.
app/design/frontend/[Vendor]/[Theme]/Magento_Checkout/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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"> <!-- First Step: Shipping & Billing Addresses --> <item name="shipping-step-address" xsi:type="array"> <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item> <item name="sortOrder" xsi:type="string">1</item> </item> <!-- Second Step: Shipping Methods --> <item name="shipping-step-methods" xsi:type="array"> <item name="component" xsi:type="string">Vendor_Module/js/view/shipping-methods</item> <item name="sortOrder" xsi:type="string">2</item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock> </body> </page>
Build a custom JavaScript component to handle shipping methods.
File: app/design/frontend/[Vendor]/[Theme]/web/js/view/shipping-methods.js
define([ 'uiComponent', 'Magento_Checkout/js/model/step-navigator', 'Magento_Checkout/js/model/shipping-service', 'Magento_Checkout/js/model/shipping-rate-registry' ], function (Component, stepNavigator, shippingService, rateRegistry) { 'use strict'; return Component.extend({ defaults: { template: 'Magento_Checkout/shipping-methods' }, isVisible: ko.observable(false), initialize: function () { this._super(); stepNavigator.registerStep( 'shipping-methods', null, 'Select Shipping Method', this.isVisible, _.bind(this.navigate, this), 15 ); return this; }, navigate: function () { this.isVisible(true); shippingService.isLoading(true); rateRegistry.set(''); }, navigateToNextStep: function () { stepNavigator.next(); } }); });
Create a KnockoutJS template for managing shipping methods.
File: app/design/frontend/[Vendor]/[Theme]/Magento_Checkout/templates/shipping-methods.html
<div class="step-content"> <h2 data-bind="i18n: 'Select Shipping Method'"></h2> <each args="data: getRegion('shipping-method-list'), as: 'shippingMethodList'"> <render args="shippingMethodList"></render> </each> <button type="button" data-bind="click: navigateToNextStep, i18n: 'Next'"></button> </div>
Execute the following commands:
php bin/magento s:up
php bin/magento s:d:c
php bin/magento s:s:d -f
php bin/magento c:f
Hope it helps !
If you find our reply helpful, please give us kudos.
A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.
WebDesk Solution Support Team
Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789
Thank You,
WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789
Location: 150 King St. W. Toronto, ON M5H 1J9