Translation not working in catalog-add-to-cart.js

[krisztian-fekete]

Preconditions

Magento v2.2.1 Enterprise Edition

Steps to reproduce

I wanted to change the default "Add to Cart" text of the add to cart button to "Add to Basket", so I created a translation CSV file in my theme:

app/design/frontend/MyTheme/default/i18n/en_GB.csv

with the following content:

"Add to Cart", "Add to Basket"

Which works fine.

However, if I click on "Add to Basket", catalog-add-to-cart.js changes it back to "Add to Cart".

I checked this file and it seems to disable the button (disableAddToCartButton) while the item is added to the basket (changing the text to "Adding..."), then it calls enableAddToCartButton to re-enable it:

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);
                addToCartButton.attr('title', addToCartButtonTextDefault);
            }, 1000);
        }

Since there is no addToCartButtonTextDefault specified in options, it falls back to $t('Add to Cart'). $t is supposed to call mage/translate to translate the string to the one I specified in the translation file, judging from this bit:

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

But it does not — the button text is changed to "Add to Cart"

Workaround

As a workaround, I created a mixin to set the addToCartButtonTextDefault option to 'Add to Basket', but I'd rather have mage/translate translate the string in the js:

1. created app/design/frontend/MyTheme/default/Magento_Catalog/web/js/catalog-add-to-cart-mixin.js with the following content:

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

        return function (target) {
            $.widget('mage.catalogAddToCart', target, {
                options: {
                    addToCartButtonTextDefault: $t('Add to Basket')
                }
            });

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

2. Created app/design/frontend/MyTheme/default/Magento_Catalog/requirejs-config.js with the following content:

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

[magento-engcom-team]

@krisztian-fekete, thank you for your report.
We've acknowledged the issue and added to our backlog.

[krisztian-fekete]

A bit of follow-up: it seems the issue is caused by pub/static/frontend/themename/default/en_GB/js-translation.json being empty (file content is just an empty array, []). Checked in both developer and production modes. I guess this is related to this issue:

#8508

This was allegedly fixed in 2.2.2 so I'll try to upgrade and see if that solves it.

[sanganinamrata]

I am working on this at #dmcdindia

[yosefkurniawan]

This should be related to another issue: #3771
Agree with @krisztian-fekete , the cause is the js-translation.json is empty (not generated)
if we put a hardcode in js-translation.json like so:
{"Add to Cart": "Add to Basket"}
the issue won't appear

[drabikowy]

@magento give me 2.4-develop instance

[magento-engcom-team]

Hi @drabikowy. Thank you for your request. I'm working on Magento 2.4-develop instance for you

[magento-engcom-team]

Hi @drabikowy, here is your Magento instance.
Admin access: https://i-14024-2-4-develop.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[m2-assistant]

Hi @krzksz. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• 2. Verify that the issue is reproducible on 2.4-develop branch

  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

• 3. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[krzksz]

It seems like the issue was already fixed as I am not able to reproduce it using 2.4-develop branch: