1

I am using this extension which adds extra fee to quote after select a particular payment. After selecting any payment option it is making an ajax call, I want to show loader until the ajax request is completed. below is my js file

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

I tried injecting 'Magento_Checkout/js/model/full-screen-loader' class and then use fullScreenLoader.startLoader(); but it is not working.

Can anyone suggest me how to show loader image on checkout page ?

2

You can show default loader in magento by using the following code

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

If you want to hide use the following code

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

OR

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

OR

var body = $('body').loader();
body.loader('destroy');
2
  • it is working, but is it the proper way to show loader? – Piyush Feb 9 '18 at 13:16
  • Yes, you can use. It's magento default loader. – Chander Shekhar Feb 9 '18 at 13:28
6

You can try for start:

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

OR

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

And for remove:

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

OR

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

See example

1
  • hi @Sohel, can we add this upon changing country in checkout, in which file i need to use this code? – jafar pinjar Jul 8 '20 at 7:25
0

All answers on this page are wrong. You need to add the model 'Magento_Checkout/js/model/full-screen-loader' to your define section, and then use it to show/hide the loader.

The code below is from vendor/magento/module-negotiable-quote/view/frontend/web/js/action/set-payment-information-mixin.js. Note how it calls fullScreenLoader.startLoader() and then fullScreenLoader.stopLoader() after the storage.post is complete:

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

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.