Add Class to Button After Product Add to Cart in Magento 2

addtocartajaxmagento2

In product listing grid/list view mode after added product to cart with ajax,

Need add custom class in button (Add To Cart) .

Can i create some observer js or i must rewrite standard methods ?

Best Answer

You have to override default catalog-add-to-cart.js file from

vendor/magento/module-catalog/view/frontend/web/js/add-to-cart.js

into your custom theme,

app/design/frontend/{Vendorname}/{themename}/Magento_Catalog/web/js/catalog-add-to-cart.js

Add one line in below function, addToCartButton.addClass('customclass');

enableAddToCartButton: function(form) {
            var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added');
            var self = this,
                addToCartButton = $(form).find(this.options.addToCartButtonSelector);

            addToCartButton.find('span').text(addToCartButtonTextAdded);
            addToCartButton.attr('title', addToCartButtonTextAdded);

            setTimeout(function() {
                var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add to Cart');
                addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
                addToCartButton.find('span').text(addToCartButtonTextDefault);
                addToCartButton.attr('title', addToCartButtonTextDefault);
            }, 1000);
            addToCartButton.addClass('customclass');
        }

You can replace customclass with your own class.

Related Topic