Magento2 translating Javascript (KO) template text
-
30-09-2020 - |
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 ?
Solution
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 thesetup: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:
OTHER TIPS
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.