Translating custom strings into theme knockout templates

Question

I know that this issue has been dealt with several times in this forum

Magento2 localisation Javascript

Magento 2 - translating problem in JS templates

Magento2 translating Javascript (KO) template text

I have installed the Italian language pack on my Magento 2.1.9 project and most strings are correctly translated.

I added a new translation dictionary in my theme.

vendor/<Vendor>/<Theme>/i18n/it_IT.csv

Here I've modified some translations and added the new strings of my theme to translate. For strings included in phtml files everything works fine.

I added a some custom strings in knokout templates of checkout. For example in

<My-theme>/Magento_Checkout/web/template/authentication.html 

I added

<span data-bind="i18n: 'Do you already have an account?'"></span>

Then in my theme it_IT.csv:

"Do you already have an account?","Hai già un account?"

Of course I emptied cache, pub/static/, var/view_preprocessed/, var/generation, etc.. and I runned all the commands.

The strings are still in English.

I really have to create a new language package to translate a few strings in the checkout? What's the reason?

EDIT Online translations work for all strings. It can be a way to fix it temporarily but not the definitive solution.

Answer 1

You need to extend a language package, creating a translation file in the theme is not enough.

This extension module needs to contain:

composer.json

{
  "name": "snowdog/project-language-translations",
  "description": "Some translations for some project",
  "type": "magento2-language",
  "require": {
    "magento/framework": "^100.0.0"
  },
  "autoload": {
    "files": [
      "registration.php"
    ]
  }
}

language.xml

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

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::LANGUAGE,
    'snowdog_en_us_custom',
    __DIR__
);

And of course file with translations in desired language.

Answer 2

An alternative solution (the one we finally adopted) is to include translation files in a module instead of in the theme.

Oddly the modules csv can easily translate the js strings.

Create a new module with:

<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::MODULE,
    '<Vendor>_<Module>',
    __DIR__
);

composer.json

{
  "name": "vendor/module",
  "description": "Project custom translations",
  "require": {
    "php": "7.0.2|7.0.4|~7.0.6"
  },
  "type": "magento2-module",
  "autoload": {
    "files": [ "registration.php" ],
    "psr-4": {
      "<Vendor>\\<Module>\\": ""
    }
  }
}

etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="<Vendor>_<Module>" setup_version="1.0.0" />
</config>

and here we will add all of our language file:

i18n/it_IT

i18n/en_US

..

We chose this system because the project we are working on has many languages and we didn't want to include too many language packages.

Note that it will work only for new strings because Magento gives priority to the language pack translations. But this is another story.