Magento 2 Localisation – Fix Translating Problem in JS Templates

localisationmagento2

Is there a way to translate phrases defined in JS templates in Magento 2?
I have checked official translation structure overview and searched the net but can't seem to find proper solution.

For example: I wish to translate Qty string within minicart element. I have added the following translation to i18n/xx_XX.csv:

"Qty","Translation"

but doesn't take effect after refreshing. Other strings within the csv that are server side generated are translated fine.

I also have tried with deleting all cache files within /var and refreshing/flushing cache from admin.

Thanks for any suggestions.

Best Answer

Ok, so finally got this resolved by creating a new language pack, modified certain template files and cleared all caches:

Created a new language pack:
- created new folder inside app/i18n/< vendor >/xx_xx/
- created 3 necessary files: language.xml, registration.php, xx_XX.csv according to official guidelines (mind lower and uppercases of folders and files)
- translated the store front within the csv
- cleared all the caches within administration
As almost all strings were translated except the minicart & checkout items my next steps were:
- copied each corresponding html file for specific element to my theme_folder/module which started to pull the new translations from my language pack. For example on how i translated mini cart string "Recently added item(s)": i copied the content.html from app/design/frontend/< vendor >/< blank >/Magento_Checkout/web/template/minicart/content.html to my corresponding theme module folder. Doing this the translations from my language package were getting translated.

Those strings that didn't get translated in step 1. and got translated in step 2. by copying the module files to theme folder had the attribute data-bind="i18n.

Reference: Creating a language pack in M2 (official)

Step 1: collect the phrases

First, you need to find out the phrases that you need to translate.

You can do so by running:

php bin/magento i18n:collect-phrases -o "/path/to/magento2/app/i18n/vendor/lg_lg/dictionary.csv"

Note that vendor is the same as when you develop module and lg_lg is the lang code of your language.

Step 2: create the `composer.json` file

Go to your app/i18n/vendor/lg_lg folder and create the composer.json file:

{
    "name": "vendor/lg"
    ,"type": "magento2-language"
    ,"description": "Tamil language"
    ,"authors": [{
        "name": "Bilal Usean",
        "email": "bla@bla.com",
        "role": "Developer"
    }]  
    ,"extra": {"map": [["*", "vendor/lg_lg"]]}
}

Step 3: create the `language.xml` file

Still in your app/i18n/vendor/lg_lg folder you need to create a language.xml file:

<?xml version='1.0'?>
<language xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:noNamespaceSchemaLocation='urn:magento:framework:App/Language/package.xsd'>
    <code>lg_LG</code>
    <vendor>vendor</vendor>
    <package>lg_lg</package>
</language>

Step 4: create the `registration.php` file

Still in the same folder, you need to create a registration.php file:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::LANGUAGE,
   'vendor_lg_lg',
   __DIR__
);

Step 5: translate

Still in your folder, you can start writing your translations in a lg_lg.csv file based on the dictionary you retrieved in step 1. You can use the offical guide to follow the translation guidelines: http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands-i18n.html#config-cli-subcommands-xlate-dict-trans

Step 6: create the language pack

Run the following command:

php bin/magento i18n:pack app/i18n/vendor/lg_lg/lg_lg.csv lg_Lg lg_LG

Important note

For this to work, your .csv file name must exactly match the locale, including the characters' case.

Official documentation: http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands-i18n.html#config-cli-subcommands-xlate-example2

Best Answer

Related Solutions

Magento – Magento 2 – translating problem with JS strings

Magento – How to add a new language – Magento 2.0.1

Step 1: collect the phrases

Step 2: create the composer.json file

Step 3: create the language.xml file

Step 4: create the registration.php file