Primarily, widget resources are used when text in a widget display template is translated. A Knockout custom binding named widgetLocaleText is available on the storefront to invoke the translation of the resource using the store’s current locale. This will ultimately call the i18next library, but that is invisible to the widget templates. An example is shown below using the widgetLocaleText binding in its simplest form, passing in the resource key:

<h2 data-bind="widgetLocaleText: 'cartHeader'"></h2>

The resource files defined for a widget for the current locale are used to replace the key with the right resource. The locale is defined for the storefront when the page is loaded. In the current release of Commerce Cloud, the locale is defined for the Site. The resources for the current locale are returned with the widget data when a page is loaded. These resources are mapped onto a widget and also as a namespace for i18next.

If you need to translate text within a widget’s JavaScript, use the translate function in the widget view model. This would be required, for example, when sending a message for display on the notification bar.

notifier.sendSuccess(widget.WIDGET_ID, widget.translate('loginSuccessText'));