I'm extending and translating a third party module which has the following in a template:

<!--ko foreach: options-->
<div class="option">
    <label data-bind="i18n: label"></label>
<!-- /ko -->

The label variable pulls in three attributes in a loop, but because there is no literal string value declared - the dictionary does not pick it up and any attempts to translate the value label returns are ignored.

I have hacked it by doing the following:

<label data-bind="i18n: 'Back Dimensions'" style="display:none;"></label>
<label data-bind="i18n: 'Top Dimensions'" style="display:none;"></label>
<label data-bind="i18n: 'Circumference'" style="display:none;"></label>

<!--ko foreach: options-->
<div class="option">
    <label data-bind="i18n: label"></label>
<!-- /ko -->

So here the translations are picked up because the literal strings to be translated are declared in the template and picked up by the dictionary parser.

But I'm curious what is the correct approach to this...

  • Updated the answer with an example of adding the translation in php
    – Vinai
    Nov 18, 2018 at 5:07

1 Answer 1


As far as I know there is no proper way to translate dynamic strings in JavaScript. The best approach probably is to translate the option labels on the server with __() before they get into JS.

For example you could add them to the $.mage.translate instance in the .phtml template with something like this (untested):

require(['jquery', 'mage/translate'], ($) => {
<?php foreach ($options as $label): ?>
        '<?= $block->escapeJs($label) ?>',
        '<?= $block->escapeJs(__($label)) ?>'
<?php endforeach; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.