Translating static text in JavaScript files

Question

I've got some static text that is dynamically being displayed on the frontend with JavaScript.

Now considering the site has 3 locales, how do I best translate those static texts?

I know I could put the JavaScript code in my twig files and use the translate filter, but that is what I'm trying to avoid as I like to keep the HTML & JavaScript separated.

Is there a way to pass on certain messages to a script?

From this answer, I learned there's such a thing as Craft.t but I can't seem to access it from the frontend. Can it be included?

EDIT - To clarify what I'm looking for, it's something in the likes off this Wordpress concept, where you can pass some variables from the server to a javascript script. It would allow me to make some global fields to store the translations in, and make those translations editable from the backend. But I'm guessing that's not possible?

Answer 1

For now I'm going with this solution:

<script>

    var translatedLabels = {
        'name' : {{'Uw naam'|translate}},
        'email' : {{'Uw e-mail adres'|translate}},
        'email_receiver' : {{'E-mail adres van de ontvanger'|translate}},
    }

</script>

The above is in a template file that gets included on the relevant pages, if it turns out I'll need those or other translated texts in multiple parts of the website, I might just include it in the basic layout directly.

It allows me to keep doing the translations from the backend with that translation plugin and I can now use the translated messages in my Javascript generated HTML.

Answer 2

I had a similar problem with a non craft project.

Our solution was to create a lang.js which only contained a lang object.

Something like:

const lang = {
  'de': {
    'greeting': 'Hallo'
  },
  'fr': {
    'greeting': 'Bonjour'
  },
  'en': {
    'greeting': 'Hello'
  }
}

We include said lang.js and and I've we ever used text in javascript we got our text from the lang.js.

lang['fr'].greeting

We stored the current language in a variable to access the text dynamically.