Extending localization

You can extend the localization support in Sterling Store Engagement to support multiple locales, add languages other than the languages that are supported by default, add custom date formats, and so on.

Sterling Store Engagement supports all general localization requirements including currency handling, date formatting, number formatting, and so on.

However, you must first set up the locales and associate them with organizations and users by using Applications Manager. For more information, see Defining locales.

Adding support for a new locale

Create bundle entries for all the text used throughout the application in its respective <language>.json file.
Create separate <language>.json files for all the modules under the <WORKSPACE>/store-frontend/src/assets/store-frontend/i18n/<module> folder.
Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present:
SCREEN_EXTENSIONS_HOME/app/config
Copy the i18n.config.ts file from <WORKSPACE>/store-frontend/src/app/config folder to SCREEN_EXTENSIONS_HOME/app/config folder.

Update a webpack magic comment webpackInclude with the new locale code as shown in the following example:

public static loadLocale(localeId: string): Promise<any> {
                     localeId = `${localeId}-${AppContextService.getFromContext('countryCode')}`;
        const locale = I18nConfig.localeMap[localeId] || localeId;

        return import(
            /* webpackChunkName: "[request]" */
            /* webpackInclude: /[/\\](en|de|es|fr|fr-CA|it|ja|pt|zh-Hans|zh-Hant)\.js$/ */
            /* webpackExclude: /[/\\]global|extra/ */
            `@angular/common/locales/${locale}.js`
        ).then(m => registerLocaleData(m.default));
    }

You must ensure that you use only the locale codes that Angular supports as the new locale code.

However, if your locale code does not match the ones that Angular supports, you can support it by updating the localeMap details of the corresponding Angular locale code.

For example, Angular does not support pt-Br as a valid locale code. But you can add pt-Br as a locale by binding it to pt as shown in the following example:

public static localeMap: { [locale: string]: string } = {
        'pt-BR': 'pt',
};

Updating a new fallback language

Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present:
SCREEN_EXTENSIONS_HOME/app/config
Copy the i18n.config.ts file from <WORKSPACE>/store-frontend/src/app/config folder to SCREEN_EXTENSIONS_HOME/app/config.
Update the fallbackLanguage variable with the new locale code.
```
public static fallbackLanguage = 'en';
```

Adding and updating custom date formats

You can update an existing date format as well as add a new date format.

Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present:
SCREEN_EXTENSIONS_HOME/app/config
Copy the date-format.config.ts file from <WORKSPACE>/store-frontend/src/app/config folder to SCREEN_EXTENSIONS_HOME/app/config.

Add a new object with the locale code as the key and date formats as the value.

export const DateFormatConfig: any = {
    'en': {
        'isfMedium': 'd MMM YYYY, h:mm a',
        'isfFull': 'EEEE, d MMMM yyyy, h:mm a',
        'isfMediumDate': 'd MMM yyyy',
        'isfFullDate': 'EEEE, d MMMM yyyy',
        'isfShortTime': 'h:mm a'
    }
}

Supported date formats

Sterling Store Engagement uses a custom date pipe, dateFormat, for date formatting, which supports all the features supported by DatePipe in Angular.

The date-format.config file is used to customize date format throughout the application for different locales.

By default, Sterling Store Engagement supports the following date formats:

isfMedium - d MMM YYYY, h:mm a
isfFull - EEEE, d MMMM yyyy, h:mm a
isfMediumDate - d MMM yyyy
isfFullDate - EEEE, d MMMM yyyy
isfShortTime - h:mm a

The default date format is isfMediumDate.