DeprecatedNext-generation platform

Translating bundle entries

Sterling Store Engagement supports translation of bundle entries through the ngx-translate module.

All the application bundles are defined under store-frontend/src/assets/store-frontend/i18n/<module-name>. The bundle entries are defined in the en.json file as nested JSON objects in the following format:
“pickOrder”:
{ 
“ACTION_Close”: ”Close”,
“ACTION_Done”: “Done”,
…
…
}

Here, pickOrder is the JSON key defined per component.ACTION_Close is the Bundle Key and Close is the Bundle Value.

You can then access the bundle values by using the dot notation, in a HTML or TS file. For example, pickOrder.ACTION_Close

You can either use the TranslateService, the TranslatePipe or the TranslateDirective to get your translation values.
  • Using pipe:
    <span > {{ 'pickOrder.LABEL_Location' | translate:{locationId: pickLocation.locationId } }}</span>
  • Using directive:
    <div translate [translateParams]=“{locationId: pickLocation.locationId}”>pickOrder.LABEL_Location</div>
  • Using service:
    this.translate.instant(‘pickOrder.LABEL_Location', {locationId: pickLocation.locationId});