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

7

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.

Geben Sie hier die Bildbeschreibung ein

Vishwas Soni
quelle

Antworten:

3

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

        });
    }
}
Rakesh Jesadiya
quelle