5

How to add new tab or step in checkout page of magento2, that i need one more step in checkout page how to do it

  • 2
    What you have tried so far – sivakumar Dec 12 '15 at 1:20
  • i am not getting ui tags used in the checkout page and also flow can you help me on this – Pradeep Kumar Dec 14 '15 at 3:38
  • Me also.I think you should have idea knockout.js in addition to layout xml etc. – sivakumar Dec 14 '15 at 16:28
  • I think a good place to start looking is in the checkout_index_index.xml file within the magento/magento-checkout module. – brideo Dec 16 '15 at 10:15
  • 1
    Side note, the official documentation provides a good article about that: devdocs.magento.com/guides/v2.0/howdoi/checkout/… – Raphael at Digital Pianism May 19 '16 at 9:03
8

finally i got the solution, follow below steps for adding new tab or step for checkout page in Magento2

app\code\Sugarcode\Test\view\frontend\layout\checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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="mynewstep" xsi:type="array">
                                                <item name="component" xsi:type="string">Sugarcode_Test/js/view/checkout/my-step-view</item>
                                                    <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                                    <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                                    <!--To display step content after payment step "sortOrder" > 2 -->
                                                <item name="sortOrder" xsi:type="string">2</item>
                                                <item name="children" xsi:type="array">
                                                    <!--add here child component declaration for your step-->
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

app\code\Sugarcode\Test\view\frontend\web\template\checkout\mystep.html

<!--The 'step_code' value from the .js file should be used-->
<li id="mynewstep" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <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>

app\code\Sugarcode\Test\view\frontend\web\js\view\checkout\my-step-view.js

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        /**
        *
        * mystep - is the name of the component's .html template,
        * my_module - is the name of the your module directory.
        *
        */
        return Component.extend({
            defaults: {
                template: 'Sugarcode_Test/checkout/mystep'
            },

            //add here your logic to display step,
            isVisible: ko.observable(false),


            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'mynewstep',
                    //step alias                    
                    'mynewstep',
                    //step title value
                    'My Step Title',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                        * sort order value
                        * 'sort order value' < 10: step displays before shipping step;
                        * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                        * 'sort order value' > 20 : step displays after payment step
                    */
                    15
                );

                return this;
            },

            /**
                        * The navigate() method is responsible for navigation between checkout step
                        * during checkout. You can add custom logic, for example some conditions
                        * for switching to your custom step
                        */
            navigate: function () {
                var self = this;
                //getPaymentInformation().done(function () {
                    self.isVisible(true);
               // });

            },


            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

Note:- run bin\magento setup:static-content:deploy and upgrade script which enable your module and also to move .js and template files to Magento2/pub/static fodler

protected by Community Oct 10 '17 at 6:45

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.