How to translate Knockout templates?

localization
knockout
js-translation-json

(Dmitry Fedyuk) #1

Magento 2 uses Knockout JavaScript framework.
Knockout template is a file with .html extension, for example: https://github.com/magento/magento2/blob/develop/app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html

To make the strings translatable use data-bind attribute with i18n binding handler, for example:

<span class="admin__action-dropdown-text" data-bind="i18n: 'Columns'"></span>

https://github.com/magento/magento2/blob/develop/app/code/Magento/Ui/view/base/web/templates/grid/controls/columns.html#L14

There is an official documentation for this functionality: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/translations/translate_theory.html#add_strings_ui_html


Bug fix: how to translate Knockout templates in the app/code/Magento/Ui/view/base/web/templates folder
How is js-translation.json file generated?
How to make the JavaScript strings localizable (translatable)
How is js-translation.json file generated?
How is a JavaScript translation dictionary («js-translation.json») generated on the static assets deployment («bin/magento setup:static-content:deploy»)?
(Dmitry Fedyuk) #2

If you need to translate HTML text outside of HTML element you can do it using the comment syntax:

<!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->

Magento will add this string and its translation to the js-translation.json file.

See the documentation: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/translations/translate_theory.html#add_strings_ui_html1


(Dmitry Fedyuk) #3

See also