Hikmadh Commerce| Ecommerce Development Consulting | Magento Development and Consulting Service

New Step In Magento Checkout Page

Add A New Step In Magento Checkout Page

we will explore the valuable addition of a new step in the Magento checkout page.

This enhancement aims to optimize the user experience by incorporating essential information or customization choices prior to completing a purchase.

How To Add A New Step In Magento Checkout Page

Step 1: Create A Custom Module

    1. Create the module configuration file “module.xml” where “app/code/Hikmadh/Tab/etc”.Use the following code.
 
                
                <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Hikmadh_Tab" setup_version="1.0.0"/>
</config>

2)Create the registration file “registration.php” where ‘app/code/Hikmadh/Tab”.Use the following code.

 

 
                
                <?php
\Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Hikmadh_Tab', __DIR__);

3)Enable the module by typing the following command into your terminal.

                
                php bin/magento module:enable Hikmadh_Tab

Step 2: Add the new step to the Checkout page layout.

  1. Extend the checkout page’s layout . use the below code save at “Hikmadh/Tab/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">
                                    <item name="check-login-step" xsi:type="array">
                                        <item name="component" xsi:type="string">Hikmadh_Tab/js/view/checkout-login-step
                                            <item name="sortOrder" xsi:type="string">2
                                                <item name="children" xsi:type="array">
                                                                                    </item>
                                                                                </item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </argument>
                                                    </arguments>
                                                </referenceBlock>
                                            </body>
                                        </page>

Step 3: Create an .html template for the component.

  1. Create a new html file named check-login.html under “Hikmadh/Tab/view/frontend/web/template” directory.
                
                <li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
    <div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>
        <div id="checkout-step-title" class="step-content" data-role="content">
            <form data-bind="submit: navigateToNextStep" novalidate="novalidate" method="post" enctype="multipart/form-data" action="">
                <div class="actions-toolbar">
                    <div class="primary">
                    <input type="hidden" name="form_key" value="getFormKey(); ?>">
                    <label for="prescription">Prescription File:
                    <input type="file" id="prescription" name="prescription" required>
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Step 4: Create the .js file implementing the view model.

  1. Create the checkout-login-step.js file under “Hikmadh/Tab/view/frontend/web/js/view” directory.
                
                define([
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Customer/js/model/customer',
    'mage/url',
    'jquery'
], function (
    ko,
    Component,
    _,
    stepNavigator,
    customer,
    url,
    $
) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Hikmadh_Tab/check-login'
        },

        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        stepCode: 'isLogedCheck',
        stepTitle: 'Upload Prescription',

        initialize: function () {
            this._super();
            stepNavigator.registerStep(
                this.stepCode,
                null,
                this.stepTitle,
                this.isVisible,
                _.bind(this.navigate, this),
                15
            );

            return this;
        },

        navigate: function () {
           
            var fileInput = document.getElementById('prescription');
            if (fileInput) {
                fileInput.value = '';
            }
        },

        navigateToNextStep: function () {
            var formKey = window.checkoutConfig.formKey;
            var uploadUrl = url.build('hikmadh_tab/index/submit');

           
            var fileInput = document.getElementById('prescription');
            if (!fileInput || fileInput.files.length === 0) {
                // No file selected, display an error message
                alert('Please select a file to upload.');
                return;
            }

            
            var file = fileInput.files[0];
            if (file.type !== 'application/pdf' && !file.name.endsWith('.txt')) {
                // Invalid file type, display an error message
                alert('Only text-based PDF or text files are allowed.');
                return;
            }

           
            var formData = new FormData();
            formData.append('form_key', formKey);
            formData.append('prescription', file);

            
            $.ajax({
                url: uploadUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    // Show loading indicator or disable the button if needed
                },
                success: function (response) {
                    stepNavigator.next();
                },
                error: function (xhr, status, error) {
                    // Handle error response
                },
                complete: function () {
                }
            });
        }
    });
});