I18n in components

LiveMarket components API supports multiple locales.

The locale used is determined via locale-front and locale-api component props. They do not have to be the same value.

Changing Front end locale

The locale-front property changes only the front end strings, such as button labels.

<!-- Make buttons etc appear in "en" locale -->
<lm-carousel
    locale-front="en"
...
/>

The fallback locale is pl. If a message or locale is not found, the code will default to Polish.

Add or edit messages

The available front end locales and messages are dependent on window.lmLocalize. By setting its value, you can add more locales or overwrite the ones already available.

window.lmLocalize = {
    myNewLocale: { // will add a new locale with "myNewLocale" as the key
        loadMore: 'Lorem',
        productDetails: 'ipsum',
        chooseVariant: 'dolor',
        addToCart: 'sit',
        omnibusPrice: 'amet',
        priceFrom: 'consectetur',
        priceTo: 'adipiscing',
        more: 'elit',
    },
    en: {} // will delete all messages in the "en" locale
}

Default message strings

Below are the default locales and message strings:

const defaultMessages = {
    pl: {
        loadMore: 'Załaduj więcej',
        productDetails: 'Szczegóły produktu',
        chooseVariant: 'Wybierz wariant:',
        addToCart: 'Dodaj do koszyka',
        omnibusPrice: 'Najniższa cena w ciągu 30 dni to',
        priceFrom: 'od',
        priceTo: 'do',
        more: 'więcej',
    },
    en: {
        loadMore: 'Load more',
        productDetails: 'Product details',
        chooseVariant: 'Choose variant:',
        addToCart: 'Add to cart',
        omnibusPrice: 'The lowest price in the last 30 days is',
        priceFrom: 'from',
        priceTo: 'to',
        more: 'more',
    },
    de: {
        loadMore: 'Mehr laden',
        productDetails: 'Produktdetails',
        chooseVariant: 'Variante wählen:',
        addToCart: 'In den Warenkorb',
        omnibusPrice: 'Der niedrigste Preis in den letzten 30 Tagen beträgt',
        priceFrom: 'von',
        priceTo: 'bis',
        more: 'mehr',
    },
    fr: {
        loadMore: 'voir plus',
        chooseVariant: 'Choisir une variante',
        addToCart: 'Ajouter au panier',
        productDetails: 'Détails du produit',
        omnibusPrice: 'Le prix le plus bas en 30 jours est',
        priceFrom: 'De',
        priceTo: 'À',
        price: 'prix',
        more: 'plus',
    }
}

Changing API response locale

The locale-api property changes the API response, like the language of shorts and products, if the provided locale is available. If undefined, or the locale is unavailable, it will default to Polish.

<!-- Uses "de" locale for shorts and products -->
<lm-carousel 
    locale-api="de"
...
/>