Skip to main content
Commonmark migration
Source Link

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][1]create a module. Create requirejs-config.js file at /var/www/html/YOURMAGENTOSTORE/app/code/Vendor/Module/view/frontend/requirejs-config.js.

As you can see that you will be able to catch the ajax success event by this method. [1]: https://www.mageplaza.com/magento-2-module-development/

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][1]. Create requirejs-config.js file at /var/www/html/YOURMAGENTOSTORE/app/code/Vendor/Module/view/frontend/requirejs-config.js.

As you can see that you will be able to catch the ajax success event by this method. [1]: https://www.mageplaza.com/magento-2-module-development/

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.

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

Source Link
P S
  • 2k
  • 4
  • 23
  • 41

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][1]. 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]: https://www.mageplaza.com/magento-2-module-development/