How to modify text string from this JavaScript file

Question

I would like to change a text string in this file, to be Add or Added to Basket depending on which page the user is on:

app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js

To explain, this piece of text is added to the add-to-cart button when the user selects it, at first it is changed from Add to Cart to Adding..., then to Added and finally back to Add to Cart

On the Category View page I would like it to change to Add at the end and on the Product View I'd like to change it to Add to Basket at the end.

I've used tranlation CSV file in my theme to change Add to Cart to Add to Basket already. But this does not translate strings from JavaScript, it's a bug Magento2 bug. app/design/frontend/Holy/mytheme/i18n/en_GB.csv

Anyway, I don't think translations will work for me here as I would need to use a different translation depending on which page the user is on, and they're both using the Magento_Category module.

I have a solution but I'm not sure if it's best practice, I made a copy of: app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js

and placed the copy in my theme at: app/design/frontend/Holy/mytheme/Magento_Catalog/web/js/catalog-add-to-cart.js

then a changed a section of code to:

// Check to see if we're using the form which is present on the category-view page.
if (jQuery(self.element.context).attr('data-role') == "tocart-form") {
    var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add');
} else {
    var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add to Trolley');
}

Is this ok? Or is there a better way of doing it, I would prefer not to have to override all the JavaScript from this file in my theme.

Answer 1

This is Magento-2 bug so You can change it by override this file without any issue.

app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js

to

app/design/frontend/Holy/mytheme/Magento_Catalog/web/js/catalog-add-to-cart.js

You can put your changes to this file.

Answer 2

best way to override .js files.

Helloworld/Learning/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Catalog/js/catalog-add-to-cart':'Helloworld_Learning/js/catalog-add-to-cart'
        }
    }
};

Helloworld/Learning/view/frontend/web/js/catalog-add-to-cart.js

and change your code as you like

// Check to see if we're using the form which is present on the category-view page.
if (jQuery(self.element.context).attr('data-role') == "tocart-form") {
    var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add');
} else {
    var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add to Trolley');
}