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 ?

1

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');
  • 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
3

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

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.