How to properly translate strings in JavaScript

Question

Say I have a piece of custom JavaScript loaded in some pages of my store. This JavaScript serves the purpose of interactivity and can display some text. How would I make it multi-langual like I would with the __("string"); format in PHP?

Say i.e. I have this piece of JavaScript:

$('.readmorebutton').click(function() {
    if (! $('.readmore').hasClass('open') ) {
        $('.readmorebutton').text('Show less'); //How to translate?
    } else {
        $('.readmorebutton').text('Read More'); //How to translate?
    }
});

note: JS is taken out of context and stripped down; the working of it is not the issue, the translating of the text is.

This is in a custom.js loaded via XML, as it runs on all pages. — Asitis, Dec 02 '16 at 08:26
Hm no. That's based on Magento1 and Prototype (which I believe is no longer part of Mag2) but it did lead me to this answer, but it seems outdated nowadays too http://magento.stackexchange.com/questions/38039/magento-2-javascript-text-translations — Asitis, Dec 02 '16 at 09:09

Eamonn · Accepted Answer · 2016-12-14T10:33:52.400

Write your strings to be translated like so:

$.mage.__('Foobar')

$('.readmorebutton').click(function() {
    if (! $('.readmore').hasClass('open') ) {
        $('.readmorebutton').text($.mage.__('Show less')); //How to translate?
    } else {
        $('.readmorebutton').text($.mage.__('Read More')); //How to translate?
    }
});

Magento then should use the same translation files as your PHP/HTML code.

Don't forget to clear caches and re-deploy static content afterwards.

score 0 · Answer 2 · answered Apr 06 '21 at 08:28

I made a easy solution:

let sometext = '<?php echo $this->__('text to be translated.'); ?>';
$('.readmorebutton').click(function() {
    if (! $('.readmore').hasClass('open') ) {
        $('.readmorebutton').text(sometext);
    } else {
        $('.readmorebutton').text('Read More');
    }
});

How to properly translate strings in JavaScript

2 Answers2