Translations

The StarterKit plugin has the facility to handle translations so that when a user changes the selected language, text with corresponding translations will show the translated text for the selected language.

Translation File

Translations are stored in what is referred to as the translation file. This is a JavaScript file that is not part of the main application source code which means it can be edited without having to rebuild the entire application.

Translations for text must be manually defined within the translation file for each supported language. The unique key defined for each item of text must be used within your application to load the translation for that item of text.

The StarterKit plugin stores translations in the following file:

/resources/translation/system-translation.js

Translation File Format

The translation file is plain text JavaScript and contains the definition of a SYSTEM_TRANSLATIONS object:

const SYSTEM_TRANSLATIONS = {
  firstName: {
    en: "First Name",
    fr: "Prénom", 
    de: "Vorname", 
    es: "Vorname",
  },
  lastName: {
    en: "Surname",
    fr: "Nom de famille", 
    de: "Nachname", 
    es: "Apellido",
  }
}

The SYSTEM_TRANSLATIONS object contains translation entries. Each translation entry contains a mapping between language IDs and the corresponding translation values. Translation entries are identified by a translation key, a unique string used in your code to lookup the required translation:

Store.getTranslation("firstName");

It is possible to group/nest translation entries:

const SYSTEM_TRANSLATIONS = {
  customerFields: {
    firstName: {
      en: "First name",
      fr: "Prénom", 
      de: "Vorname", 
      es: "Vorname",
    },
    lastName: {
      en: "Surname",
      fr: "Nom de famille", 
      de: "Nachname", 
      es: "Apellido",
    }
  },
  accountFields: {
    accountNumber: {
      en: "Account number",
      fr: "Numéro de compte", 
      de: "Accountnummer", 
      es: "Número de cuenta",
    },
    sortCode: {
      en: "Surname",
      fr: "Code de tri", 
      de: "Bankleitzahl", 
      es: "Código de clasificacion",
    }
  }
}

Grouped/nested translation entries are identified by a compound key made up of the group key and the translation key separated by a period:

Store.getTranslation("customerFields.firstName");

Looking Up Translations

Within your application you can use the getTranslation method available in the application store to lookup a translation for a given translation key and, optionally, provide a default English text value to use if no translation exists for the translation key/language combination:

Store.getTranslation("customerFields.firstName", "First Name");

In order to access the application store within your components you must import it:

import { Store } from "../utils/data-store";

More information about the getTranslation method is available on the Application Store page.

Loading Translations

Translations are loaded into your application using the setTranslations method on . This is called from within /resources/js/plugin-setip.js when your application is first loaded into the browser.