On click of add to cart button the button text is not changing to 'adding' and 'added'

Question

After clicking on add to cart button the button text is not changing to adding or added.In some places its working but in product description page and we have created a featured product widget in home page in both of these places its not working.where i need to change the code for this.

Answer 1

The main file is responsible to change label Adding... and Added is

Magento\Catalog\view\frontend\web\js\catalog-add-to-cart.js

When you click on Add to Cart button It execute the submitForm function from this file,

submitForm: function (form) {
        var addToCartButton, self = this;

        if (form.has('input[type="file"]').length && form.find('input[type="file"]').val() !== '') {
            self.element.off('submit');
            // disable 'Add to Cart' button
            addToCartButton = $(form).find(this.options.addToCartButtonSelector);
            addToCartButton.prop('disabled', true);
            addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
            form.submit();
        } else {
            self.ajaxSubmit(form);
        }
    }

And after that It execute the self.ajaxSubmit(form) funciton from the same file,

on this function you can see the line

self.disableAddToCartButton(form);

this line is responsible for to change label Adding..

disableAddToCartButton: function (form) {
            var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...'),
                addToCartButton = $(form).find(this.options.addToCartButtonSelector);

            addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
            addToCartButton.find('span').text(addToCartButtonTextWhileAdding); // from here it change the label
            addToCartButton.attr('title', addToCartButtonTextWhileAdding);
        }

and after that on Ajax success function It calls the self.enableAddToCartButton(form); this function changes the label to Added

  enableAddToCartButton: function (form) {
            var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added'),
                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); // from here it change the label
                addToCartButton.attr('title', addToCartButtonTextDefault);
            }, 1000);
        }

So just debug this file and location to check your Issue. Also, check console to see any error.

Answer 2

Take a look this file: vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js. You can see how it works.

If you wonder to know how to override it. Should use mixins

We can create a module, and then add these files:

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'Vendor_Module/js/catalog-add-to-cart-mixin': true
            }
        }
    }
};

app/code/Vendor/Module/view/frontend/web/js/catalog-add-to-cart-mixin.js

define([
        'jquery',
        'mage/translate',
        'jquery/ui'
    ],
    function ($, $t) {
        'use strict';

        return function (target) {
            $.widget('mage.catalogAddToCart', target, {
                options: {
                    addToCartButtonTextWhileAdding: $t('Adding Testing...'),
                    addToCartButtonTextAdded: $t('Added Testing'),
                    addToCartButtonTextDefault: $t('Add to Cart Testing')
                }
            });

            return $.mage.catalogAddToCart;
        };
    });