2

i Have Created a step on checkout page. for this i followed some tutorials available on google. Now the problem is the Step 2 content is visible on step 1 SS : http://prntscr.com/n7dueb This is how i created my step.

<?xml version="1.0"?>


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="checkout_cart_item_renderers"/>
<head>
    <css src="css/order-confirmation.css"/>
</head>
<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">Magento_Checkout/js/view/checkout-login-step</item>

                                        <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 name="summary" xsi:type="array">
                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
                                        <item name="sortOrder" xsi:type="string">100</item>
                                        <item name="config" xsi:type="array">
                                            <item name="template" xsi:type="string">Magento_Checkout/summary</item>
                                        </item>
                                        <item name="children" xsi:type="array">
                                            <item name="totals" xsi:type="array">
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
                                                <item name="displayArea" xsi:type="string">totals</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="template" xsi:type="string">Magento_Checkout/summary/totals</item>
                                                </item>
                                                <item name="children" xsi:type="array">
                                                    <item name="subtotal" xsi:type="array">
                                                        <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
                                                        </item>
                                                    </item>
                                                    <item name="shipping" xsi:type="array">
                                                        <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="title" xsi:type="string" translate="true">Shipping</item>
                                                            <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
                                                        </item>
                                                    </item>
                                                    <item name="grand-total" xsi:type="array">
                                                        <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="title" xsi:type="string" translate="true">Order Total</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                            <item name="itemsBefore" xsi:type="array">
                                                <item name="component" xsi:type="string">uiComponent</item>
                                                <item name="children" xsi:type="array">
                                                    <!-- merge your components here -->
                                                </item>
                                            </item>
                                            <item name="cart_items" xsi:type="array">
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="details" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="thumbnail" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                                <item name="displayArea" xsi:type="string">before_details</item>
                                                            </item>
                                                            <item name="subtotal" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                                <item name="displayArea" xsi:type="string">after_details</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                            <item name="itemsAfter" xsi:type="array">
                                                <item name="component" xsi:type="string">uiComponent</item>
                                                <item name="children" xsi:type="array">
                                                    <!-- merge your components here -->
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                            <item name="sidebar" xsi:type="array">
                                <item name="config" xsi:type="array">
                                    <item name="componentDisabled" xsi:type="boolean">true</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
    <referenceContainer name="page.messages" remove="true"/>
</body>

JS:

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Customer/js/model/customer'
],
function (
    ko,
    Component,
    _,
    stepNavigator,
    customer
) {
    'use strict';
    /**
     * check-login - is the name of the component's .html template
     */
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/check-login'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'isLogedCheck',
        //step title value
        stepTitle: 'Login',

        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                this.stepCode,
                //step alias
                null,
                this.stepTitle,
                //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
                 */
                9
            );

            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 () {

        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}
);

template:

<!--Use 'stepCode' as id attribute-->
<div data-bind="fadeVisible: isVisible, attr: { id: stepCode }" class="container checkout-acc-container checkout-acc-container-2" >
<div class="row">
    <div class="col-12 col-sm-12 col-md-8 col-lg-6 mr-auto ml-auto offset-lg-3">
        <h2>Checkout</h2>
        <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">
                <label>Email Address</label>
                    <input type="text" name="email" class="field input-acc-field email-field">
                <label class="field-label password-label">Password</label>
                    <input type="password" name="password" class="field input-acc-field password-field">

               <button data-role="opc-continue" type="submit" class="checkout-btn">
                    <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                </button>
                </div>
            </form>
        </div>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.