CorvidReference

multilingual

The Multilingual API is used when working with the languages in a multilingual site.

A multilingual site is a site that is set up to display in more than one language. To learn more about enabling multilingual functionality in your site, see About Wix Multilingual.

To use the Multilingual API, import wixWindow from the wix-window module:

   import wixWindow from 'wix-window';

The APIs in wix-window.multilingual can only be used in front-end code.

Table of Contents

PROPERTIES

?
Store values associated with an object.
currentLanguageSets or gets the site's current display language.
isEnabledGets whether the site has been set up to be shown in multiple languages.
siteLanguagesGets information about the site's languages.

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
SiteLanguageAn object returned by the siteLanguages property that contains information about the site's languages.

currentLanguage

Sets or gets the site's current display language.

Description

Setting the currentLanguage property changes the site's display language. The current page is reloaded in the newly set language.

Set the current language using a two-letter language code. The code must represent one of the languages set to show on your site. You can retrieve your site's languages and corresponding language codes using the siteLanguages property.

Getting the currentLanguage property gets the two-letter language code of the site's current display language.

Syntax

get currentLanguage(): string
TYPE
?
The kind of data the property stores.
string

Examples

Get the site's current display language

import wixWindow from 'wix-window';

// ...

let language = wixWindow.multilingual.currentLanguage; // "en"

Set the site's current display language

import wixWindow from 'wix-window';

// ...

wixWindow.multilingual.currentLanguage = "es";

Create a button used to toggle between two languages

This example assumes you have a site set up to display in both English and Spanish. It also assumes you have a button with the ID toggleLanguage.

An onClick event handler is registered for the button. The event handler checks the site's current language and then sets the site to change to the other available language.

import wixWindow from 'wix-window';

// ...

$w.onReady( function () {
  $w("#toggleLanguage").onClick( (event) => {
    if(wixWindow.multilingual.currentLanguage === "en"){
      wixWindow.multilingual.currentLanguage = "es";
    }
    else {
      wixWindow.multilingual.currentLanguage = "en";
    }
  } );
} );

Create a dropdown used to change between available languages

This example assumes you have a site set up to display in multiple languages. It also assumes you have a dropdown element with the ID languageDropdown.

When the page loads, the site's available languages are retrieved. Then, the JavaScript map() function is used to change the retrieved language information into the format expected by the dropdown's options property. Next, the JavaScript filter() function is used remove the current language from the list. Finally, the dropdown's options property is set using the formatted language list.

An onChange event handler is registered for the dropdown element. The event handler changes the site's current language based on the language chosen by the user.

import wixWindow from 'wix-window';

// ...

$w.onReady( function () {
  let languages = wixWindow.multilingual.siteLanguages;

  languages = languages.map( (obj) => {
    return {label: obj.name, value: obj.languageCode};
  } );

  let currentLanguage = wixWindow.multilingual.currentLanguage;
  languages = languages.filter( obj => obj.value !== currentLanguage );

  $w('#languageDropdown').options = languages;

  $w("#languageDropdown").onChange( (event) => {
    wixWindow.multilingual.currentLanguage = event.target.value;
  } );
} );

Filter a dataset based on the site's current display language

This example assumes you have a site set up to display in both English and Spanish. It also assumes you have a collection that contains data in both languages. The collection has a language field that indicates each item's language. The following code filters a dataset connected to the collection so it only contains items that correspond to the site's current language.

import wixWindow from 'wix-window';
import wixData from 'wix-data';

// ...

$w.onReady( function () {
  let language = wixWindow.multilingual.currentLanguage;
  $w("#myDataset").setFilter( wixData.filter().eq("language", language) );
} );

isEnabled

Gets whether the site has been set up to be shown in multiple languages.

Syntax

get isEnabled(): boolean
TYPE
?
The kind of data the property stores.
boolean

Examples

Get whether the site is set up to be shown in multiple languages

import wixWindow from 'wix-window';

// ...

let isEnabled = wixWindow.multilingual.isEnabled; // true

siteLanguages

Gets information about the site's languages.

Description

The siteLanguages property returns an array of SiteLanguage objects containing information about all the languages that the site is set to display in.

Syntax

get siteLanguages(): Array<SiteLanguage>
TYPE
?
The kind of data the property stores.

Examples

Get information about the site's languages

import wixWindow from 'wix-window';

// ...

let languages = wixWindow.multilingual.siteLanguages;

/* languages is:
 * [
 *   {
 *     "name": "English",
 *     "locale": "en-us",
 *     "languageCode": "en",
 *     "countryCode": "USA",
 *     "isPrimaryLanguage": true
 *   }, {
 *     "name": "Spanish",
 *     "locale": "es-es",
 *     "languageCode": "es",
 *     "countryCode": "ESP",
 *     "isPrimaryLanguage": false
 *   }, {
 *     "name": "Chinese",
 *     "locale": "zh-cn",
 *     "languageCode": "zh",
 *     "countryCode": "CHN",
 *     "isPrimaryLanguage": false
 *   }
 * ]
 */

Create a dropdown used to change between available languages

This example assumes you have a site set up to display in multiple languages. It also assumes you have a dropdown element with the ID languageDropdown.

When the page loads, the site's available languages are retrieved. Then, the JavaScript map() function is used to change the retrieved language information into the format expected by the dropdown's options property. Next, the JavaScript filter() function is used remove the current language from the list. Finally, the dropdown's options property is set using the formatted language list.

An onChange event handler is registered for the dropdown element. The event handler changes the site's current language based on the language chosen by the user.

import wixWindow from 'wix-window';

// ...

$w.onReady( function () {
  let languages = wixWindow.multilingual.siteLanguages;

  languages = languages.map( (obj) => {
    return {label: obj.name, value: obj.languageCode};
  } );

  let currentLanguage = wixWindow.multilingual.currentLanguage;
  languages = languages.filter( obj => obj.value !== currentLanguage );

  $w('#languageDropdown').options = languages;

  $w("#languageDropdown").onChange( (event) => {
    wixWindow.multilingual.currentLanguage = event.target.value;
  } );
} );

SiteLanguage

An object returned by the siteLanguages property that contains information about the site's languages.

See Also

siteLanguages

Syntax

type SiteLanguage = {
  name: string
  locale: string
  languageCode: string
  countryCode: string
  isPrimaryLanguage: boolean
}
MEMBERS
?
The properties of an object.
name
string
The language's full name.
locale
string
The language's locale code, which represents a set of language-related formatting preferences.
languageCode
string
The language's two-letter code.
countryCode
string
The language's three-letter country code.
isPrimaryLanguage
boolean
Whether the language is the site's primary language.

Examples

Get information about the site's languages

import wixWindow from 'wix-window';

// ...

let languages = wixWindow.multilingual.siteLanguages;

/* languages is:
 * [
 *   {
 *     "name": "English",
 *     "locale": "en-us",
 *     "languageCode": "en",
 *     "countryCode": "USA",
 *     "isPrimaryLanguage": true
 *   }, {
 *     "name": "Spanish",
 *     "locale": "es-es",
 *     "languageCode": "es",
 *     "countryCode": "ESP",
 *     "isPrimaryLanguage": false
 *   }, {
 *     "name": "Chinese",
 *     "locale": "zh-cn",
 *     "languageCode": "zh",
 *     "countryCode": "CHN",
 *     "isPrimaryLanguage": false
 *   }
 * ]
 */

Create a dropdown used to change between available languages

This example assumes you have a site set up to display in multiple languages. It also assumes you have a dropdown element with the ID languageDropdown.

When the page loads, the site's available languages are retrieved. Then, the JavaScript map() function is used to change the retrieved language information into the format expected by the dropdown's options property. Next, the JavaScript filter() function is used remove the current language from the list. Finally, the dropdown's options property is set using the formatted language list.

An onChange event handler is registered for the dropdown element. The event handler changes the site's current language based on the language chosen by the user.

import wixWindow from 'wix-window';

// ...

$w.onReady( function () {
  let languages = wixWindow.multilingual.siteLanguages;

  languages = languages.map( (obj) => {
    return {label: obj.name, value: obj.languageCode};
  } );

  let currentLanguage = wixWindow.multilingual.currentLanguage;
  languages = languages.filter( obj => obj.value !== currentLanguage );

  $w('#languageDropdown').options = languages;

  $w("#languageDropdown").onChange( (event) => {
    wixWindow.multilingual.currentLanguage = event.target.value;
  } );
} );