Magento2 catch ajax complete, add to cart

Question

I'm building an custom mini-cart. I want it to update itself when an article is added to the cart. I'm trying to do this by jQuery with catching the ajax complete, but can't get it to work. Can anyone help me?

Answer 1

To implement this you must override or extend the core catalog-add-to-cart.js file from your module. I assume that you know how to create a module. Create requirejs-config.js file at /var/www/html/YOURMAGENTOSTORE/app/code/Vendor/Module/view/frontend/requirejs-config.js.

var config = {
    map: {
        '*': {
            'catalogAddToCart':
                'Vendor_Moduel/js/catalog-add-to-cart'
        }
    }
};

Now copy the core file from Magento_Catalog/view/frontend/web/js/catalog-add-to-cart.js to your file at /var/www/html/YOURMAGENTOSTORE/app/code/Vendor/Module/view/frontend/web/js/catalog-add-to-cart.js. Now the part of your interest will be the function named ajaxSubmit.

ajaxSubmit: function(form) {
    var self = this;
    $(self.options.minicartSelector).trigger('contentLoading');
    self.disableAddToCartButton(form);

    $.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);
            }
            console.log('yes added my code');

            self.enableAddToCartButton(form);

        }
    });
},

You need to do whatever you want at the success section of it.

The output of my console is:

yes added my code

As you can see that you will be able to catch the ajax success event by this method.

Answer 2

I found another solution that I added via a module block. This script catches ajax complete for "add to cart" and reads the data returned, like subtotal aso.

require(['jquery'], function ($) {
  $(document).ajaxComplete(function (event, xhr, settings) {
    if (settings.url.indexOf("customer/section/load/?sections=cart") > 0) {
      cartObj = xhr.responseJSON;
      console.log(cartObj);
      console.log('ex tax: ' + cartObj.cart.subtotal_excl_tax);
      console.log('inc tax: ' + cartObj.cart.subtotal_incl_tax);
      console.log('subtotal: ' + cartObj.cart.subtotal);
    }
  });
});