Salla theme developers can easily support other languages thanks to the Twilight's localization function, which makes it simple to extract text in a selected language.
In the previous article, we explained how to perform localization within the Twilight theme engine.

:::info
✅ Twilight JS SDK provides API methods meant to ease the access to the store's transaltions.
✅ The theme's languages are all loaded by default when the SDK is initialized via salla.init().
:::

In this article, we are going to talk about using the Twilight JS SDK for setting and getting a store's translation in action. 

📙 What you'll learn

• Usage
• Getting transaltion
• Setting transaltion

Usage

The locales directory /locales/ contains the localization files, which are JSON-based files that define translation strings. Each of these is a collection of key-value pairs found in a JSON string file, such as "Key":"Value."

The following is an example of a locale file:

{
  "common": {
    "remember_my_choice": "Remember my choice",
    "note": "Note",
    "country_code": "country code"
  },

  "pages": {
    "cart": {
      "free_shipping": "Free Shipping"
    }
  }
}

:::tip
Supporting multiple languages is known as internationalization, or i18n (18 letters separate the i and n). Twilight i18n provides the developer with access to many translations that are ready made for your Twilight Theme. The developer can find a complete list of all the language translation files supported by Twilight here

:::

Mainly, the Twilight JS SDK offers two methods to manage the translations, get() and set().

Getting transaltion

The get() method can be used to retrieve text from the locale file. It needs only one parameter, which is key of that text. For example, in the previous code, the developer might return the text "Free Shipping" as follows:

salla.lang.get('pages.cart.free_shipping')

Setting transaltion

The set() method can be used to change the translation of text in the locale file. It needs two parameters, the key of that text and the value that will be stored for that text. For example, in the previous code, the developer may change the text "Remember my choice" as follows:

salla.lang.set('en.pages.order.new_order','New Order')

:::warning
This updates an existing key of the current locale
:::

Events

In some scenarios, the developer may need to retrieve some translations upon the completion of the loading. In such a case, the event "onLoaded()" may be invoked as follows:

Salla.lang.onLoaded(() => {
  Salla.log(salla.lang.get('pages.profile.verify_title'))
});

Adding New Translations

Using Single Key Path

The add() method can be used to add a new translation key path to multiple locales. It needs two parameters, which is the key of the text to be translated, and the object that contains the translation of the key in multiple locales. For example, the developer can add the text "New Order" to different locales as follows:

salla.lang.add('pages.order.new_order', {'ar': "طلب جديد", 'en': "New Order"})

Using Bulk Key Paths

The addBulk() method can be used to add more than one new translation key paths to multiple locales. It needs one parameter, which is the object containing multiple keys and their corresponding translations in different locales. For example, the developer can add the texts "New Order" and "New Product" to different locales as follows:

salla.lang.addBulk({
    pages.order.new_order', {'ar': "طلب جديد", 'en': "New Order"},
    pages.product.new_product', {'ar': "منتج جديد", 'en': "New Product"}
});  

:::check[Information]
To explore more about this API, check the Lang.js library on GitHub.
:::