Magento 2.1.0 Change Add to Cart Button Text – Override JS File

addtocartmagento2overridesrequirejs

I have changed "Add to cart" text to "I want this" by overriding "vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
But, when I click on "I want this" (i.e. "Add to cart" ) button, the product is added to the cart and then again "Add to cart" text appears on the button.

I think product is added via ajax call, that is why a newly added text is not displaying after the ajax call and "Add to cart" text is displaying.

I have tried this :

I have created a custom extension Ved_Mymodule.

I have checked that extension is active.

After that I followed these steps:

app/code/Ved/Mymodule/view/frontend/requirejs-config.js:

var config = {
    map: {
        '*': {
            catalogAddToCart:'Ved_Mymodule/js/customCatalogAddToCart'
        }
    }
};

app/code/Ved/Mymodule/view/frontend/web/js/customCatalogAddToCart.js:

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

$.widget('Ved_Mymodule.customCatalogAddToCart',$.mage.catalogAddToCart, {

    //Override function
    disableAddToCartButton: function(form) {
        var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...');
        var addToCartButton = $(form).find(this.options.addToCartButtonSelector);
        addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
        addToCartButton.find('span').text(addToCartButtonTextWhileAdding);
        addToCartButton.attr('title', addToCartButtonTextWhileAdding);
        console.log('Hello 1');
    },

    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 = 'heya..'; //self.options.addToCartButtonTextDefault || $t('Add to Cart..');
            addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
            addToCartButton.find('span').text(addToCartButtonTextDefault);
            addToCartButton.attr('title', addToCartButtonTextDefault);
        }, 1000);

        console.log('Hello 2');
    }

});

return $.Ved_Mymodule.customCatalogAddToCart;
});

I am trying to print dummy messages in the console.

After this:
I have run static content deploy.
Reindex the data.
Cache cleaned and flushed.

But changes are not appearing.

Best Answer

You have to override js file from path

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

To

app/design/frontend/YourTheme/Packadge/Magento_Catalog/web/js/catalog-add-to-cart.js

You have to changes text which you want to from this file.

Let me know if you have any query.