To accommodate cartridge renderers that have UI strings that require translation, Commerce Store Accelerator has implemented:
A RequireJS loader plugin called
i18n-loader. A cartridge renderer’s view model uses thei18n-loaderplugin to load the translation resource file the renderer needs as a dependency. The resource file that gets loaded is based on the current language.A custom Knockout filter called
i18n-filter. This filter is added to text bindings in the cartridge renderer’s HTML template and it is used to retrieve translated strings from the loaded resource file during page rendering.
Both the loader plugin and the filter make use of the 18next third-party library:
Before cartridge rendering, the
i18n-loaderuses thei18nextlibrary to locate and load the correct translation resource file for the current language.During cartridge rendering, the
i18n-filteruses thei18nextlibrary to locate and return the correct string from the loaded resource file, after which the string is injected into the rendered HTML on the page.
The loader plugin and the filter are included as part of the Base module in /CommerceAccelerator/Base/src/main/web-app/i18n-loader.js and i18n-filter.js, respectively.
