cancel
Showing results for 
Search instead for 
Did you mean: 

How to split shipping checkout step into two steps?

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?

1 REPLY 1

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