0

I've added a new step to checkout based on https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_new_step.html and is working good.

What I want to do next is to move the authentication section from shipping step to the newly created step. I've called it "Login" step.

I've added to login 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">
    <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="authentication" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="componentDisabled" xsi:type="boolean">true</item>
                                    </item>
                                </item>
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="login" xsi:type="array">
                                            <item name="sortOrder" xsi:type="string">1</item>
                                            <item name="component" xsi:type="string">Custom_AdvancedCheckout/js/view/checkout-login-step</item>
                                            <item name="children" xsi:type="array">
                                                <item name="authentication" xsi:type="array">
                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
                                                    <item name="children" xsi:type="array">
                                                        <!--Additional authentication fields-->
                                                        <item name="errors" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">0</item>
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
                                                            <item name="displayArea" xsi:type="string">messages</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                        <item name="shipping-step" xsi:type="array">

And to the template file

<li id="login" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Login'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <!-- ko foreach: getRegion('authentication') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

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

And my js file

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Custom_AdvancedCheckout/check-login'
            },

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

            /**
             *
             * @returns {*}
             */
            initialize: function () {
                this._super();
                stepNavigator.registerStep(
                    'login',
                    null,
                    'Login',
                    this.isVisible,
                    _.bind(this.navigate, this),
                    9
                );

                return this;
            },

            navigate: function () {

                this.isVisible(true);
            },

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

And is not showing the form.

What I understand is that I have to add the authentication to this step and remove it from step shipping.

Can someone help me with a hint?

0

You have two authentications now, remove the old one from checkout component

The 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="authentication" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="componentDisabled" xsi:type="boolean">true</item>
                                    </item>
                                </item>
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="login" xsi:type="array">
                                            <item name="sortOrder" xsi:type="string">1</item>
                                            <item name="component" xsi:type="string">Custom_AdvancedCheckout/js/checkout-login-step</item>
                                            <item name="children" xsi:type="array">
                                                <item name="authentication" xsi:type="array">
                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
                                                    <item name="displayArea" xsi:type="string">authentication</item>
                                                    <item name="children" xsi:type="array">
                                                        <!--Additional authentication fields-->
                                                        <item name="errors" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">0</item>
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
                                                            <item name="displayArea" xsi:type="string">messages</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

The template: check-login.html

<li id="login" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Login'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <!-- ko foreach: getRegion('authentication') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

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

Step js file: checkout-login-step.js

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        ‘Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: ‘ Custom_AdvancedCheckout/check-login'
            },

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

            /**
             *
             * @returns {*}
             */
            initialize: function () {
                this._super();
                stepNavigator.registerStep(
                    'login',
                    null,
                    'Login',
                    this.isVisible,
                    _.bind(this.navigate, this),
                    9
                );

                return this;
            },

            navigate: function () {

                this.isVisible(true);
            },

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

This code add an auth popup trigger to your first step

| improve this answer | |
  • I've tried but is not working. I've added more information to the initial post – andy1786 Sep 6 at 10:15
  • Please see updated answer @andy1786 – Maxim Liksunov Sep 6 at 16:28
  • you have mention template and component from Magento_Checkout. Should not be from the plugin? – andy1786 Sep 7 at 6:51
  • I’ve tested and copied from the Magento_Checkout from my theme. You need to replace with your module – Maxim Liksunov Sep 7 at 15:53
  • Updated the answer – Maxim Liksunov Sep 7 at 16:01

Your Answer

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

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