I18n Keys in JS

support
1

Hi, I’m trying to change the inner text of an HTML element using a script. I’m getting the value from a JSON object as i18n keys, but when I set the value in HTML, it displays the i18n keys instead of the translated text.

Screenshot from 2025-03-20 12-35-35
Screenshot from 2025-03-20 12-35-35551×326 59.7 KB

script:

if (testimonial) {
  document.querySelectorAll('.testimonial-name').forEach(nameElement => nameElement.innerText = testimonial.customerName);
  document.querySelectorAll('.testimonial-position').forEach(positionElement => positionElement.innerText = testimonial.companyName);
  document.querySelectorAll('.testimonial-description').forEach(descriptionElement => descriptionElement.innerText = testimonial.testimony);

}

2

How is this related to Hugo?

3

If it possible to convert this key to respect language .

4

When your JavaScript runs, Hugo is much out of the picture. In any case, your description is lacking too much detail to understand what you’re doing.

5

:white_check_mark: Our Use Case:

On our pricing page, we have a language and currency switcher that updates the displayed prices and currency symbols based on the selected country. We also display customer testimonials, which are different for each country. So, when the user switches the country, we also want to update the corresponding testimonials.

:warning: The Problem:

This setup works fine when we’re using only English content.

However, our website supports multiple languages, and all our text content is handled using i18n keys (translations are managed through YAML files).

So when a user switches the country:

  • We dynamically update the testimonial content via JavaScript.
  • The testimonial text is inserted as i18n keys (e.g., testimonials.customer1.quote) into the DOM.
  • But instead of rendering the actual translated text, it displays the raw i18n key as plain text.

:red_question_mark: Question:

Is it possible to handle this use case using Hugo?

Specifically:

  • Can we dynamically update content (like testimonials) based on the selected country/language and have Hugo render the correct translation instead of just the i18n key?
  • Or is there a better approach to achieve this while keeping multilingual support intact?
6

guess you will have to generate country specific languages and/or translations (whole script or some kind of translation table) into your javascript code.

you might use resoureFromString or a content-adapter creating javascript resources per language. or even an inline script tag with the tables…

I did not get the exact part how your setup and where you use hugos multilang feature to build static pages ande where and how your dynamic text comes in.

Hoping that points in a direction - Won’t spend the effort to implement a PoC based on guesses. Maybe providing a stripped down repo, may trigger someone to add that feature.

1 Like
7

It’s currently not possible to range through i18n, but with a little hack I would do the following:

  • create a custom output type based on JSON/TOML/YAML (preference) that has a list of all items for home and is suppressed on all other kinds.
  • mount i18n into data/i18n
  • load it via site.Data.i18n in the custom output type which would if properly configured (hehe) result in i18n.en.json and i18n.langugagecode.json
  • use those in my JS components

Some issues that will crop up:

  • if it’s not parsed in the layout files somehow it might result in placeholders still being in the code and that might be harder to replace in JS ({{ some_value }} vs %s typically in JS code.
  • maybe plenty of unused string combinations in those JSON files. Maybe clean it up by setting inclusion regexpes to run the i18n terms against before publishing them.
1 Like