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?

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

2 Answers 2

5

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.

1
  • You are welcome.
    – P S
    Jan 8, 2018 at 12:54
6

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);
    }
  });
});
2
  • 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.
    – P S
    Jan 8, 2018 at 12:56
  • IMO this is the way better solution than overriding a code file. If one overrides a core file they have to update the file after each Magento update.
    – Ejaz
    Apr 28, 2022 at 20:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.