Magento2 translating Javascript (KO) template text

Question

I am trying to add a translation for the text <!-- ko i18n: 'Store credit available' --><!-- /ko --> present in vendor/magento/module-customer-balance/view/frontend/web/template/payment/customer-balance.html, but if I try to change the text in my i18n/en_US.csv, still its not working.

I have flushed the cache and and used static content deploy.

Is there a different way to add translations for KO templates ?

Answer 1

So I was finally able to figure out the problem.

Seems that the JS template translation are read from js-translation.json which is generated during setup:static-content:deploy execution. In order to populate data in this file a new language package has to be created for the project.

So instead of adding the CSV at the theme level like app/design/<area>/<vendor>/<theme-name>/i18n/xx_XX.csv we need to add it in the language package.

To create a new Language Package first from project document root we will need to create the following directories:

mkdir -p app/i18n/<project-name>/<xx_xx>

Important: USE lowercase DIRECTORY NAMES ONLY camcelcased folder names will not work

Then change directory to the newly created folders:

cd app/i18n/<project-name>/<xx_xx>

Now you can create a composer.json (optional) file with the following content:

{                                                     
    "name": "<project-name>/<xx_xx>",                             
    "description": "<sample description>", //Ex:English (United States) language
    "version": "<version-number>", //100.0.1                             
    "license": [                                      
        "OSL-3.0",                                    
        "AFL-3.0"                                     
    ],                                                
    "require": {                                      
        "magento/framework": "100.0.*"                
    },                                                
    "type": "magento2-language",                      
    "autoload": {                                     
        "files": [                                    
            "registration.php"                        
        ]                                             
    }                                                 
}                                                     

Next create we need a language.xml file with the following contents:

<language xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/Language/package.xsd">
    <code>xx_XX</code> <!-- example: <code>en_US</code> -->
    <vendor><project-name></vendor>
    <package><xx_xx></package> <!-- example: <package>en_us</package> -->
</language>

After than registration.php containing the following content is needed:

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::LANGUAGE,
    '<project-name>_<xx_xx>',
    __DIR__
);

Now we can create a our translation CSV. If you already have one inside the theme folder something like app/design/<area>/<vendor>/<theme-name>/i18n/xx_XX.csv you can just move it to app/i18n/<project-name>/<xx_xx>/xx_XX.csv

Now from the project document root we need to run these commands:

find pub/static -name js-translation.json -exec rm -rf {} \;

We need to delete the js-translation.json which has been already created before running the setup:static-content:deploy

Now we run static content deploy:

php bin/magento setup:static-content:deploy <xx_XX>

Once thats done we clear the cache:

php bin/magento cache:clean
php bin/magento cache:flush

We can verify if the translation files for JS template has been generated by finding all the js-translation.json inside the pub/static folder.

find pub/static -name js-translation.json

This will provide the list of all the translation files generated for JS templates.

Reference:

1. Magento DevDocs
2. Related Github Issue

Answer 2

As I described in the Github issue (https://github.com/magento/magento2/issues/7525#issuecomment-316690100) there is another (easier) solution to that problem.

You just need to make sure to deploy every language separate.

So instead of using:

php bin/magento setup:static-content:deploy en_US de_DE it_IT fr_FR es_ES

use

php bin/magento setup:static-content:deploy en_US
php bin/magento setup:static-content:deploy de_DE
php bin/magento setup:static-content:deploy it_IT
php bin/magento setup:static-content:deploy fr_FR
php bin/magento setup:static-content:deploy es_ES

This is probably caused by the fact that the static-content:deploy only compiles the files once and copies them afterwards to other languages.