<p>For now I'm going with this solution:</p>

<pre><code>&lt;script&gt;

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

&lt;/script&gt;
</code></pre>

<p>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. </p>

<p>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. </p>

CC BY-SA 3.0
2017-07-20T13:27:02.763Z
2017-07-20T13:27:02.763Z
mrsmn
<p>I had a similar problem with a non craft project.</p>

<p>Our solution was to create a lang.js which only contained a lang object.</p>

<p>Something like:</p>

<pre><code>const lang = {
  'de': {
    'greeting': 'Hallo'
  },
  'fr': {
    'greeting': 'Bonjour'
  },
  'en': {
    'greeting': 'Hello'
  }
}
</code></pre>

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

<pre><code>lang['fr'].greeting
</code></pre>

<p>We stored the current language in a variable to access the text dynamically.</p>

CC BY-SA 3.0
2017-07-20T05:46:45.467Z
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
CC BY-SA 3.0
2017-07-20T06:40:25.943Z
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
CC BY-SA 3.0
2017-07-20T07:04:55.853Z
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
CC BY-SA 3.0
2017-07-19T14:31:55.670Z
2017-07-19T18:27:17.623Z
2017-07-19T18:27:17.623Z
Marco Schuler
<p>I've got some static text that is dynamically being displayed on the frontend with JavaScript. </p>

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

<p>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 &amp; JavaScript separated. </p>

<p>Is there a way to pass on certain messages to a script? </p>

<p>From <a href="https://craftcms.stackexchange.com/a/986/6991">this answer</a>, I learned there's such a thing as <code>Craft.t</code> but I can't seem to access it from the frontend. Can it be included? </p>

<p>EDIT - To clarify what I'm looking for, it's something in the likes off <a href="https://codex.wordpress.org/Function_Reference/wp_localize_script" rel="nofollow noreferrer">this Wordpress concept</a>, 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? </p>

<localization><javascript>
Translating static text in JavaScript files
# Translating static text in JavaScript files

(Asked by: username_0 on 2017-07-19)

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](https://craftcms.stackexchange.com/a/986/6991), 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](https://codex.wordpress.org/Function_Reference/wp_localize_script), 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?

**Tags:** localization, javascript

---

## 2 answers

### Answer by username_0 on 2017-07-20. Score: 2 | Accepted answer

For now I'm going with this solution:


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 by username_1 on 2017-07-19. Score: 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.

> **Comments:**
> **username_0**: 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.  
> **username_1**: 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.  
> **username_0**: 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.  

---

