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

Improve this question
7
  • 2
    What you have tried so far
    – sivakumar
    Dec 12, 2015 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, 2015 at 3:38
  • Me also.I think you should have idea knockout.js in addition to layout xml etc.
    – sivakumar
    Dec 14, 2015 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, 2015 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, 2016 at 9:03

2 Answers 2

Reset to default
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

Improve this answer
8
0

For people interested for by a fully implemented Three Step Checkout extensions, check this https://www.3step-checkout.com/

Improve this answer

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