2

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?

Improve this question
2

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.

Improve this answer
1

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.

Improve this answer
3
  • While that certainly is an option (and if nothing else turns up, it'll most likely be what I'll end up using) I was hoping to manage the translations from the backend so my client can edit them as they wish. I've edited the question to better indicate the direction I was hoping to go with this. – mrsmn Jul 20 '17 at 5:46
  • I'm also hoping to see other answers. Since you access the text in js you'd need to update your js anyway if new text comes in, meaning you couldn't handle it purely on the backend. What could work without touching the js, is managing existing text on the backend or providing only 1 language from your side and let the client translate the other languages. – Marco Schuler Jul 20 '17 at 6:40
  • Best idea I managed to cook up so far is to use a template file, display the text I want in it with the translation twig tags but do it inside script tags so i actually end up with a javascript object such as you're describing. My end client can still modify the translations from the backend and I can reference the object holding the current translations where I need it in my JS files. Going to mull this over a bit longer to see if anythng comes up, otherwise I'll make this into an answer. – mrsmn Jul 20 '17 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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