1

I've created a custom step in magento 2 checkout before shipping address step. Firstly, its not getting selected on page load. Secondly, after selecting that step checkout url changes to http://www.magento2.com/checkout/#isLogedCheck

On pressing F5 its giving all steps but no step is getting selected

Following is the code for js

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

        //add here your logic to display step,
        isVisible: ko.observable(false),
        isLoggedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'isLogedCheck',
        //step title value
        stepTitle: 'Logging Information',
        logoutUrl: quote.getLogoutUrl(),
        customerEmail: quote.getCustomerEmail(),

        /**
        *
        * @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
                */
                5
            );

            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 () {
            var loginFormSelector = 'form[data-role=email-with-possible-login]',
            emailValidationResult = customer.isLoggedIn();
            if (!customer.isLoggedIn()) {
                $(loginFormSelector).validation();
                emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
            }
            if (!emailValidationResult) {
                return false;
            }

            stepNavigator.next();
        },
        navigateToMe: function () {
            stepNavigator.navigateTo('isLogedCheck');
        }
    });
});

Following is the code for HTML

<li class="card">
<div class="card-header" role="tab" id="headingOne" data-bind="click: navigateToMe">
  <h5 class="mb-0">
    <a data-bind="i18n: 'Login Information'" data-role="title" data-toggle="collapse" data-parent="#checkoutSteps" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    </a>
  </h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
  <div class="card-block">
   <!--<div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>-->
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">
            <!-- ko foreach: getRegion('customer-email') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
            <div data-bind="if: !isLoggedIn" class="block social-login-authentication-channel account-social-login">
                <div class="block-content">
                                    <div class="actions-toolbar social-btn social-btn-actions-toolbar facebook-login">
                            <a class="btn btn-block btn-social btn-facebook">
                                <span class="fa fa-facebook"></span>
                                Sign in with Facebook                    </a>
                        </div>
                                    <div class="actions-toolbar social-btn social-btn-actions-toolbar google-login">
                            <a class="btn btn-block btn-social btn-google">
                                <span class="fa fa-google"></span>
                                Sign in with Google                    </a>
                        </div>
                            </div>
            </div>
            <div data-bind='if: isLoggedIn'>
                You're already logged in as <span data-bind="text: customerEmail"></span>. Not you ? <a data-bind="i18n: 'Log Out', attr: { href: logoutUrl,title: $t('Log Out') }"></a>
            </div>
        <form class="navigate-to-next-step" 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: 'Continue'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
  </div>
</div>

Kindly suggest what am I doing wrong ?

0

I think it might have something to do with: isVisible: ko.observable(false),

This will mark the step as _complete, so nothing you want to do in that step will be executed.

Also, I don't think you're supposed to return this; in the initialize-method.

| improve this answer | |

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.