Fetching language packs

A language pack is a translation file used to adapt storefront content for different regional languages. Stored in JSON format, this file contains localized translation strings tailored to a specific locale.

The Bottle theme exposes localization-related methods within the window.Shopline global object. These methods are used to initialize language packs and retrieve localized translation strings. This article introduces how to invoke these methods to access localization data.

Fetching the theme language pack for the current locale​

window.Shopline.i18nInit​

This method initializes and loads the theme's language pack for the current locale. Calling this method triggers an asynchronous request to fetch the language pack from the remote server.

Method signature​

i18nInit(): Promise<any>

Parameters​

None.

Returns​

Promise<any>: A Promise object that resolves to a JSON object containing the localized key-value pairs for the current language.

Example​

The following sample code demonstrates how to fetch the theme language pack for the current locale:

const themeI18nData = await window.Shopline.i18nInit();
console.log(themeI18nData) // Prints data in the language pack

window.Shopline.t​

After the theme's language pack for the current locale has been initialized and loaded, you can call this method to retrieve the translation string associated with a specific key.

Method signature​

t(path: string, hash?: Record<string, any>) => string

Parameters​

Returns​

string: The localized translation string

Example​

On the search page of the Bottle theme, the structure of the English JSON file used to display the number of search results is as follows:

// i18n/en.json
{
  "search": {
    "count_results": "{{count}} Results"
  }
}

In this example, the variable count is interpolated into {{count}} Results. You can retrieve the English translation string for the search.count_results key using the following code:

let totalCount = 10;
let countText = window.Shopline.t("search.count_results", { count: totalCount });
console.log(countText) // Outputs "10 Results"

Fetching app-specific language packs​

Theme app extensions allow developers to upload app-specific localization files. To retrieve the content of these files, you can invoke the methods in the following sections.

window.Shopline.extension.i18nInit​

This method initializes and loads the app's language pack for the current locale. Invoking this method triggers an asynchronous request to fetch the language pack from the remote server.

Method signature​

i18nInit(extensionUuid: string): Promise<any>

Parameters​

Returns​

Promise<any>: A Promise object that resolves to a JSON object containing the localized key-value pairs for the current language.

Example​

The following sample code demonstrates how to fetch the app's language pack for the current locale:

const extensionI18nData = await window.Shopline.extension.i18nInit("xxxxxx");
console.log(extensionI18nData) // Prints data in the language pack

window.Shopline.extension.t​

After the app's language pack for the current locale has been initialized and loaded, you can call this method to retrieve the translation string associated with a specific key.

Method signature​

t(extensionUuid: string, path: string, hash?: Record<string, any>) => string

Parameters​

Returns​

string: The localized translation string

Example​

In a specific app's product list, the structure of the English JSON file used to display the price is as follows:

// en.json
{
  "product_list": {
    "from": "From {{price}}"
  }
}

In this example, the variable price is interpolated into From {{price}}. You can retrieve the localized translation string for the product_list.from key using the following code:

let money = 10;
let priceText = window.Shopline.extension.t("xxxxxx", "product_list.from", { price: money });
console.log(priceText) // Outputs "From 10"