24

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 ?

39

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
  • In my project js-translation.json files are created correctly from static content deploy even if .csv files are inserted in app/design/frontend/vendor/theme-name/i18n/xx_XX.csv. The only care is delete all js-translation.json before run static content deploy. – LucScu Aug 22 '16 at 9:47
  • Which version of magento are you on ? – Atish Goswami Aug 23 '16 at 13:24
  • Vender/Theme so from this what should be <project-name> as per your above code?? – Kaushal Suthar Sep 27 '16 at 13:27
  • 1
    Is this really the only way to do this? I mean, even the documentation (devdocs.magento.com/guides/v2.1/frontend-dev-guide/translations/…) states that we should be able to put translation files into design/<vender>/<theme>/i18n/xx_XX.csv. – Giel Berkers Dec 9 '16 at 13:57
  • 1
    Magento 2 has a lot of bugs related to this, for us the best way has been to manually create a script that creates the js-translation.json file and make web server configuration that delivers it on the right kinds of requests – cjohansson Jun 20 '17 at 6:14
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.