Magento 2: Отображать загрузчик во время вызова Ajax в пользовательском нокауте js

Я использую это расширение , которое добавляет дополнительную плату за предложение после выбора конкретного платежа. После выбора любого способа оплаты он выполняет вызов ajax, я хочу показывать загрузчик до тех пор, пока запрос ajax не будет завершен. ниже приведен мой файл js

define(
    [
        'ko',
        'jquery',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/resource-url-manager',
        'Magento_Checkout/js/model/payment-service',
        'mage/storage',
        'mage/url',
        'Magento_Checkout/js/action/get-totals',
        'mage/translate',
        'Magento_Checkout/js/model/payment/method-list'
    ],
    function(
        ko,
        $,
        quote,
        urlManager,
        paymentService,
        storage,
        urlBuilder,
        getTotalsAction
    ) {
        'use strict';

        return function (isLoading, payment) {
            var serviceUrl = urlBuilder.build('paymentfee/checkout/totals');
            return storage.post(
                serviceUrl,
                JSON.stringify({payment: payment})
            ).done(
                function(response) {
                    if(response) {
                        var deferred = $.Deferred();
                        isLoading(false);
                        getTotalsAction([], deferred);
                    }
                }
            ).fail(
                function (response) {
                    isLoading(false);
                    //var error = JSON.parse(response.responseText);
                }
            );
        }
    }
);

Я попытался ввести класс 'Magento_Checkout/js/model/full-screen-loader', а затем использовать fullScreenLoader.startLoader();, но это не работает.

Может ли кто-нибудь подсказать мне, как показать изображение загрузчика на странице оформления заказа?

Author: Community, 2018-02-09
Source

3 answers

Вы можете отобразить загрузчик по умолчанию в magento, используя следующий код 

var body = $('body').loader();
body.loader('show');

Если вы хотите скрыть, используйте следующий код 

var body = $('body').loader();
body.loader('hide');

ИЛИ 

jQuery('body').loader('destroy');

ИЛИ 

var body = $('body').loader();
body.loader('destroy');
 2
Author: Chander Shekhar, 2018-02-09 13:07:08

Вы можете попробовать для начала:

jQuery('body').trigger('processStart');

ИЛИ 

$('body').trigger('processStart');

И для удаления:

jQuery('body').trigger('processStop');

ИЛИ 

$('body').trigger('processStop');

См. Пример

 6
Author: Sohel Rana, 2018-02-09 14:52:16

Все ответы на этой странице неверны. Вам нужно добавить модель "magento_checkout/js/модель/полноэкранный загрузчик" в раздел "Определение", а затем использовать ее для отображения/скрытия загрузчика.

Приведенный ниже код взят из vendor/magento/module-negotiable-quote/view/frontend/web/js/action/set-payment-information-mixin.js. Обратите внимание, как он вызывает fullScreenLoader.startloader(), а затем fullScreenLoader.stopLoader() после завершения хранения.post:

define([
    'mage/utils/wrapper',
    'mage/storage',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader'
], function (wrapper, storage, quote, urlBuilder, errorProcessor, fullScreenLoader) {
    'use strict';

    return function (setPaymentInformation) {
        return wrapper.wrap(setPaymentInformation, function (originalAction, messageContainer, paymentData) {
            var serviceUrl, payload;

            if (window.checkoutConfig.isNegotiableQuote) {
                serviceUrl = urlBuilder.createUrl('/negotiable-carts/:cartId/set-payment-information', {
                    cartId: quote.getQuoteId()
                });
                payload = {
                    cartId: quote.getQuoteId(),
                    paymentMethod: paymentData,
                    billingAddress: quote.billingAddress()
                };

                fullScreenLoader.startLoader();

                return storage.post(
                    serviceUrl, JSON.stringify(payload)
                ).fail(function (response) {
                    errorProcessor.process(response, messageContainer);
                }).always(fullScreenLoader.stopLoader);
            }

            return originalAction(messageContainer, paymentData);
        });
    };
});
 0
Author: Andresa Martins, 2020-03-29 00:18:12