Localizing your checkout UI extension

In this tutorial, you'll learn how to do the following tasks:

• Define translation data

• Localize numbers using a formatNumber function similar to the Intl interface

• Localize currency using a formatCurrency Intl interface

• Localize singular and plural values

• You've completed the getting started guide.

• You've added and published a second language to your development store.

• You've activated the language in your development store's primary market.

You can copy and paste the following code into your index file and add a few example values to get the extension to render in the browser. The rest of the tutorial walks through this sample code step-by-step.

To define translations, you'll adjust the [locale].json files that come included with the extension source code.

Your default locale specifies which locale Shopify should use when no other appropriate locale can be matched. In this example, English (en) is already the default locale. However, you can set any locale to be your default locale.

To change your default locale, go to the locales folder and change the [locale].json filename to [locale].default.json.

In this step, you'll add translations for different plural forms. You'll set translations for the many, one and other plural rules needed for French (fr), but you can specify any pluralization key that Intl.PluralRules.select() supports and that's appropriate for the locale.

In subsequent steps, you'll define balance and points using a placeholder.

1. In en.default.json, add the following code:

2. In the fr.json file, add the translated content:

Now that you've defined translations, you'll learn how to localize currency.

You'll add the formatCurrency function provided by i18n. The function wraps the standard Intl interface.

Depending on the current locale, 9.99 will now resolve to the following localized currency formats:

• en: $9.99

• fr: 9,99

In this step, you'll learn how to resolve localized numbers.

You'll localize number formatting using the formatNumber function provided by i18n. The function wraps the standard Intl interface.

Depending on the current locale, 10000 will resolve to one of the following localized number formats:

• en: 10,000

• fr: 10 000

In this step, you'll learn how to translate the balance remaining message using a placeholder.

You'll use a placeholder for formattedBalance. You'll also call the translate function, which sends the formattedBalance variable so that it can be used in the translation string.

In this step, you'll learn how to translate the loyaltyPoints message, which supports pluralization.

You'll use the translate function to pass in the count of how many points are available. You'll use formattedPoints to render the points in the current locale.

The checkout UI extension should now render localized checkout content for en and fr:

To test the extension, preview the language from your development store admin.