So deaktivieren Sie den vorherigen Checkout-Schritt, wenn Sie mit dem nächsten Schritt in magento2 fortfahren

Wir haben erfolgreich einen neuen Schritt in der Checkout-Seite für magento2 hinzugefügt.

Hier finden Sie einen Code für benutzerdefiniertes JS für diesen Schritt:

Speicherort der Datei: app / code / Vendor / CheckoutStep / view / frontend / web / js / view / customer-step.js

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

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

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'customer-step',
                    //step alias
                    null,
                    //step title value
                    'Customer',
                    //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
                    */
                    8
                );

                if(customer.isLoggedIn())
                {
                    ko.observable(false);
                    stepNavigator.next();
                }

                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();
            }
        });
    }
);

HTML-Datei: app / code / Vendor / CheckoutStep / view / frontend / web / template / customerstep.html

    <form data-bind="submit: navigateToNextStep" novalidate="novalidate" class="form form-shipping-address">
        <fieldset class="fieldset">
            <!-- ko foreach: getRegion('customer-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </fieldset>
        <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>

Wenn der Kunde angemeldet ist, geht er direkt zum nächsten Schritt, der einwandfrei funktioniert.

 if(customer.isLoggedIn())
 {
     ko.observable(false);
     stepNavigator.next();
 }

Wenn ich auf den vorherigen Schritt klicke, wird zum vorherigen Schritt übergegangen. Ich muss den vorherigen Schritt deaktivieren, wenn der Kunde angemeldet ist.

Überschreiben Sie einfach die Datei step-navigator.js in Ihrem Modul in der Datei requirejs-config.js.

var config = {
    map: {
        '*': {
         "Magento_Checkout/js/model/step-navigator": "Package_Modulename/js/model/step-navigator"
        }
    }
};

Package_Modulename / js / model / step-navigator.js Datei,

hinzufügen

define(
    [
        'jquery',
        'ko',
        'Magento_Customer/js/model/customer'
    ],
    function($, ko,customer) {

navigateTo: function(code, scrollToElementId) {
        var sortedItems = steps.sort(this.sortItems);
        var bodyElem = $.browser.safari || $.browser.chrome ? $("body") : $("html");
        scrollToElementId = scrollToElementId || null;

        if (!this.isProcessed(code)) {
            return;
        }
        sortedItems.forEach(function(element) {
            if (element.code == code) {
                element.isVisible(true);
                //customization 
                if (customer.isLoggedIn()){
                    if(code == 'payment'){
                       return false;
                    }
                }
                //customization end
                bodyElem.animate({scrollTop: $('#' + code).offset().top}, 0, function () {
                    window.location = window.checkoutConfig.checkoutUrl + "#" + code;
                });
                if (scrollToElementId && $('#' + scrollToElementId).length) {
                    bodyElem.animate({scrollTop: $('#' + scrollToElementId).offset().top}, 0);
                }
            } else {
                element.isVisible(false);
            }

        });
    }
}