Magento2 Add to Cart – Button Text Not Changing to ‘Adding’ and ‘Added’

addtocartmagento2

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.

Best Answer

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.

Related Topic