By following the structure defined above for a widget, and putting the widget resources under the /locales directory for a widget, the resources will be loaded for the widget by the framework. The data to build a page in the Storefront is retrieved from the Pages Web API Endpoint. For the current page, this endpoint will return both context data and the data related to the layout of the page, such as the regions and widgets to load.

Included with the data about each widget are the resources. These resources are then mapped onto the widget and loaded when the widget is loaded. The i18next namespace used to load the resources is defined as part of the widget definition within the server-side Page Repository. When a new widget is created, its widget.json file defines a property called i18nresources:

{
  "name": "Widget Name",
  "version": 1,
  "javascript": "widget-type-js",
  "i18nresources": "widget-type",
  "availableToAllPages": true,
  "jsEditable": true,
}

The i18nresources property for a widget is used to determine the file name for each locale resource file, in the format ns.<i18nresources property>.json.

So, for the widget definition shown above, the resources file name would be ns.widget-type.json. This i18nresources property is used in the Storefront framework when loading the resources and expects the format to be as defined here. Since the resources are no longer loaded directly via a URL, the file name itself is less important, but following the convention allows for consistency.