Updating Translations | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How the translation files work
• Types of translatable content
• How to update translation files

Managing Translations

We’ve talked so far about setting up the basic structure to support multi-language sites, but how do we actually manage translations across multiple languages?

We use special text files called .po (portable object) files. These files contain instructions for how to translate the default language strings (typically English) into the other languages your site supports.

The structure of a .po file follows the below construct:

msgid untranslated-string
msgstr translated-string
msgctxt context // optional

• The msgid is the string in the default language
• The msgstr is the string in the target language
• The msgctxt is optional, but gives more context to the translator on how the string should be translated. The msgid combined with the msgctxt constitute a unique key.

You will have an individual file for each alternate language your experience supports - for example, if you have a site that supports English (default), Spanish, and French, you should have a file for es.po and fr.po containing translations. These live under the translations folder in your Jambo site.

Let’s take an example to translate the call-to-action text “Call” to Spanish. Our es.po file may contain an entry like the below:

msgid "Call"
msgstr "Llama"
msgctxt "To call an office, as a verb"

You may also run into .pot files, which are portable object template files. The only difference in these files is that they do not contain the msgstr, and are simply the template that houses the to-be-translated content.

Types of Translatable Content

Static Content

For content that does not depend on data from entity profiles, we typically will hardcode these in the default language in the page config.json files. Think about the text inputs we typically fill out for vertical labels and placeholder text as an example.

Because you are creating separate config.json files for each language, you’ll just need to ensure that the content for the target language is reflected in these files, as described in the previous unit.

Answers Library Translated Content

You’ll notice that there are several areas where text appears that aren’t specified in the pages or cards files. These include components like the No Results text that appears when a user’s query doesn’t return relevant results.

The Answers Library (as of version 1.6) has built-in translations for supported languages. If you are implementing Search in an unsupported language, or want to change these translations, you will need to override the components themselves.

Dynamic Card Content

The last piece of content to be translated is card content from Content. Because these need to be translated in real-time as results are returned to the user, we need to take some extra steps to 1) identify the strings to be translated and 2) indicate their translations in corresponding .po files.

component.js For content in your custom card’s component.js file, you can use the function translateJS to identify content to be translated.

This function needs to be surrounded by {{ curly brackets }}. It accepts a few optional parameters that we’ll walk through, in addition to the phrase which is the content in the default language.

Simple Example

showMoreText: {{ translateJS phrase='Show more' }}

Here, for the showMoreText attribute, we want the default text to be “Show more”.

If we wanted to add a Spanish translation, in our es.po file we can add the following entry:

msgid "Show more"
msgstr "Ver más"

Example with Context

Imagine using the word “Call” in two different contexts - one that refers to the noun, and one that refers to a verb. Here, we’ve added some context as a parameter in order to differentiate this. This can be referenced to help translate the content properly, as well as make the string “Call” uniquely translated for this use case.

ctaText: {{ translateJS phrase='Call now' context='Call is a verb' }}

Our es.po file would need the following entry:

msgid "Call"
msgstr "Llama"
msgctxt "Call is a verb"

Example with Templated Content

Let’s say you want to dynamically inject content from Content. In the phrase, you’ll want to indicate the content to be replaced within square brackets - like [[name]] in the below example. You then must pass the value of that attribute - in this case, name = profile.name.

subtitle: {{ translateJS phrase='My name is [[name]]' name=profile.name }}

The es.po file entry would look like the below:

msgid "My name is [[name]]"
msgstr "Mi nombre es [[name]]"

Example with Plural Form

For our last example, we’ll consider a case where we need to vary the text based off the count returned by a field.

stock: {{ translateJS phrase='One option' pluralForm='Many options' count=profile.count }}

Your es.po entry would look like the below. The msgstr at index 0 represents the singular form, while the msgstr at index 1 represents the plural form.

msgid "One option"
msgid_plural "Many options"
msgstr[0] "Una opción"
msgstr[1] "Muchas opciones"

template.hbs Another place you might need to modify translations is your template.hbs file for any hardcoded text. The function in your handlebars file to use is {{ translate phrase=""}}. Otherwise, the syntax for additional parameters will remain largely the same.

<button>{{ translate phrase='My button' }}</button>
<button>{{ translate phrase='My [[name]]' name={{someName}} }}</button>

Jambo Commands - Extract Translations

To help you make it easier and faster to get translations, we have a Jambo Command called Extract Translations built into the Answers Hitchhiker Theme that will analyze your repository and extract strings that require translations into a .pot file. You can then upload that .pot file into your translation software of choice, which should output a .po file. You can then add that .po file (or just copy its contents) into your translations/ directory. This should make collecting and organizing translations much easier for you!