2

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?

  • Magento 2 add to cart is out of the box ajax call. What do you need? – Purushotam Sangroula Jan 7 '18 at 18:32
  • Okay I understood your question. Pleae do check my answer. – Purushotam Sangroula Jan 8 '18 at 3:19
3

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.

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);
    }
  });
});
  • I do not know about this solution, It seems more like general ajax catcher, but doing my recommended way is how done usually in magento. But this is a good solution as well. – Purushotam Sangroula Jan 8 '18 at 12:56

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.