How to translate Knockout templates?


(Dmitry Fedyuk) #1

Magento 2 uses Knockout JavaScript framework.
Knockout template is a file with .html extension, for example:

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>

There is an official documentation for this functionality:

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:

(Dmitry Fedyuk) #3

See also