Localization

Search widgets supports language and currency localization (i18n)

Getting started

To apply localization, pass the following parameter options to the constructor function.

const { en } = window.yesplz.locale;
const stylefilter = window.yesplz.stylefilter({
    // ...
    locale: en,
    lng: 'en',
    currency: 'USD',
    formatCurrency: function(price) {
        // Change currency display format.
        return price;
    }
});

Parameters

Name	Type	Description
locale	object	Locale object (e.g., window.yesplz.locale.en for English). Specifies the language for client localization.
lng	string	Language code (e.g., 'en' for English). Specifies the language for server localization.
currency	string	Currency code (e.g., 'USD' for United States Dollar). Determines the currency symbol and format.
formatCurrency	function	Custom function to format the currency display. Takes a price as input and returns a formatted string.

locale

Locale object (e.g., window.yesplz.locale.en for English). Specifies the language for client localization.

Pass in a locale object for the language you want to use to apply the translation to the text displayed in the widget.

Default value is window.yesplz.locale.en

See Language codes for a list of available locale entries, including en, ja, zh, etc.

const { ja } = window.yesplz.locale;
const stylefilter = window.yesplz.stylefilter({
    // ...
    locale: ja
});

You can override some translations if you want.

const { en } = window.yesplz.locale;

console.log(en); // You can see the key values used.

const stylefilter = window.yesplz.stylefilter({
    // ...
    locale: {
        ...en,
        'labels.style': 'Design'
    }
});

lng

Language code (e.g., 'en' for English). Specifies the language for server localization.

The value is passed as a backend API parameter.

Pass language codes to apply translations to dynamically output items, such as category filter lists.

Default value is en

See Language codes for available language codes.

currency

Currency code (e.g., 'USD' for United States Dollar). Determines the currency symbol and format.

The value is passed as a backend API parameter to get a list of products with prices in the specified currency.

Default value is USD

The currency codes passed, such as USD, JPY, VND, etc. follow the ISO 4217 format.

formatCurrency

Custom function to format the currency display. Takes a price as input and returns a formatted string.

Used in widgets such as SearchBar, ProductsList, CollapsibleFilters - price, and others.

If you don't specify a callback, it uses the default built-in format.

Does not apply if you are not using the widget's default output template.

// Example
const stylefilter = window.yesplz.stylefilter({
    // ...
    formatCurrency: function(price) {
        return myCurrencyFormat(price, mySettings.currentCurrency);
    }
});

Language codes

Currently, English is the default language, and additional languages are listed below.

Language	Language code
English	en
Chinese	zh
Japanese	ja

Language codes follow the ISO 639-1 format.