Magento 2 Minicart Always Showing Loader After Product Add to Cart – How to Fix

addtocartajaxmagento2mini-cart

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.

After refreshing my page mini-cart shows updated count.

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

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

Best Answer

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.

Answering The Question

The block you want is called minicart_head, so your layout code in the controller addAction should be as follows:

if (!$this->_getSession()->getNoCartRedirect(true)) {
    if (!$cart->getQuote()->getHasError()){
        $message = $this->__('%s was added to your shopping cart.', Mage::helper('core')->htmlEscape($product->getName()));
        $response['status'] = 'SUCCESS';
        $response['message'] = $message;
        $this->loadLayout();
        $minicart = $this->getLayout()->getBlock('minicart_head')->toHtml(); // <-- here's the block
        $response['minicart'] = $minicart;
    }
}

You can use the minicart data to replace the DOM object from your javascript function.

try {
    jQuery.ajax({
        url: url,
        dataType: 'json',
        type : 'post',
        data: data,
        success: function(data){
            var json =  eval(data);
            jQuery('#ajax_loader').hide();
            if (jQuery('.header-minicart')) {
                jQuery('.header-minicart').html( json.minicart );
            }
        }
    });
} catch (e) {
}

If you observe the DOM, using Web Inspector, for example, you will see that the content updates now via AJAX, but your show/hide feature will no longer work, since the javascript that acts on the #header-cart link has not been triggered for the new content.

Javascript Issue

By using jQuery's .on(), the theme developers at magento are on the right track (although they use a convoluted procedure to update the cart via AJAX).

In order for the show/hide feature to work, you need to use .on() delegation, or bubbling. In app.js, find the following:

File: app/skin/frontend/rwd/default/js/app.js

var skipContents = $j('.skip-content');
var skipLinks = $j('.skip-link');

skipLinks.on('click', function (e) {
    ...
}

And replace it as follows:

var skipContents = $j('.skip-content');
var skipLinks = $j('.skip-link');

$j('.skip-links').on('click', '.skip-link', function (e) {
    ...
}

And there you have it. Now your content reloads via AJAX, and the links still work after the cart changes.

Magento 2.0.7 – Minicart Showing Blank Count Fix

Open your root directory and open minicar‌t.phtml.

The file path is:

app/design/frontend/{Vendor}/{themename}/Magento_Checkout/te‌mplates/cart/minicar‌t.phtml

You have to just replace span with below code,

    <span class="counter qty empty"
          data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading">

        <!-- ko if: cart().summary_count -->
            <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span>
        <!-- /ko -->
        <!-- ko ifnot: cart().summary_count -->
            <span class="counter-number">0</span>
        <!-- /ko -->

        <span class="counter-label">
        <!-- ko if: cart().summary_count -->
            <!-- ko text: cart().summary_count --><!-- /ko -->
            <!-- ko i18n: 'items' --><!-- /ko -->
        <!-- /ko -->
        </span>
    </span>

Run command, php bin/magento setup:static-content:deploy remove var folder and check again.

Best Answer

Related Solutions

Magento – Magento 1.9 cart not updating

Answering The Question

Javascript Issue

Magento 2.0.7 – Minicart Showing Blank Count Fix

Related Topic