0

When I am clicking on Add To Cart button then product was added to my cart and mini-cart count also updated but loader on mini-cart showing always.

enter image description here

After refreshing my page mini-cart shows updated count.

enter image description here

What should I do to remove that loader after mini-cart count update?

Update: Below is response of add to cart ajax call:

enter image description here

  • Do you have any errors in the console that is preventing the javascript from stopping the loader after it is started? – LM_Fielding Jun 29 '17 at 15:23
  • @LM_Fielding Thanks for your reply. No error in my browser's console tab. – Nitesh Jun 30 '17 at 5:57
  • Check by changing deploy mode to PRODUCTION and enable cache. – Jai Jun 30 '17 at 7:01
  • Check the network tab on developer tools, the XHR to find the request for adding a product to cart, it may not be completing (staying at pending due to lag?) – LM_Fielding Jun 30 '17 at 11:03
  • @LM_Fielding I have added response in my question(200 OK). – Nitesh Jun 30 '17 at 12:22
2

Add to cart Ajax call is given in below js file:

/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

So we need to override it in your theme like following:

/app/design/frontend/custom_package_name/custom_theme_name/Magento_Catalog/web/js/catalog-add-to-cart.js

Following is default ajax call where we need to add some code:

$.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            type: 'post',
            dataType: 'json',
            beforeSend: function() {
                if (self.isLoaderEnabled()) {
                    $('body').trigger(self.options.processStart);
                }
            },
            success: function(res) {
                if (self.isLoaderEnabled()) {
                    $('body').trigger(self.options.processStop);
                }

                if (res.backUrl) {
                    window.location = res.backUrl;
                    return;
                }
                if (res.messages) {
                    $(self.options.messagesSelector).html(res.messages);
                }
                if (res.minicart) {
                    $(self.options.minicartSelector).replaceWith(res.minicart);
                    $(self.options.minicartSelector).trigger('contentUpdated');
                }
                if (res.product && res.product.statusText) {
                    $(self.options.productStatusSelector)
                        .removeClass('available')
                        .addClass('unavailable')
                        .find('span')
                        .html(res.product.statusText);
                }
                self.enableAddToCartButton(form);
            }
        });
    },

Add below code in beforeSend() function:

          /*To hide loader on mini-cart*/
            $(".loading-mask").show();
            /*****************************/

Add below code in success() function:

       /*To hide loader on mini-cart*/
             setTimeout(function() {
                $(".loading-mask").hide();
             }, 3000);
        /*******************************/

Like below:

beforeSend: function() {
                if (self.isLoaderEnabled()) {
                    $('body').trigger(self.options.processStart);
                }
                /*To hide loader on mini-cart*/
                $(".loading-mask").show();
                /*****************************/

            },
success: function(res) {
                if (self.isLoaderEnabled()) {
                    $('body').trigger(self.options.processStop);
                }

                if (res.backUrl) {
                    window.location = res.backUrl;
                    return;
                }
                if (res.messages) {
                    $(self.options.messagesSelector).html(res.messages);
                }
                if (res.minicart) {
                    $(self.options.minicartSelector).replaceWith(res.minicart);
                    $(self.options.minicartSelector).trigger('contentUpdated');
                }
                if (res.product && res.product.statusText) {
                    $(self.options.productStatusSelector)
                        .removeClass('available')
                        .addClass('unavailable')
                        .find('span')
                        .html(res.product.statusText);
                }
                /*To hide loader on mini-cart*/
                setTimeout(function() {
                    $(".loading-mask").hide();
                }, 3000);
                /*******************************/
                self.enableAddToCartButton(form);
            }

I have used setTimeout() function to stop loader after mini-cart count increament.

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.