internationalizationspartacus-storefronti18next-http-backend

Spartacus Storefront Multisite I18n with Backend


We've run into some problems for our MultiSite Spartacus setup when doing I18n.

  1. We'd like to have different translations for each site, so we put these on an API that can give back the messages dependent on the baseSite, eg: backend.org/baseSiteX/messages?group=common
    But the Spartacus setup doesn't let us pass the baseSite? We can pass {{lng}} and {{ns}}, but no baseSite.
    See https://sap.github.io/spartacus-docs/i18n/#lazy-loading We'd could do it by overriding i18nextInit, but I'm unsure how to achieve this.

  2. In the documentation, it says you can use crossOrigin: true in the config, but that does not seem to work. The type-checking say it's unsupported, and it still shows uw CORS-issues

Does someone have ideas for these problems?


Solution

  • Currently only language {{lng}} and chunk name {{ns}} are supported as dynamic params in the i18n.backend.loadPath config.

    To achieve your goal, you can implement a custom Spartacus CONFIG_INITIALIZER to will populate your i18n.backend.loadPath config based on the value from the BaseSiteService.getActive():

    @Injectable({ providedIn: 'root' })
    export class I18nBackendPathConfigInitializer implements ConfigInitializer {
      readonly scopes = ['i18n.backend.loadPath']; // declare config key that you will resolve
      readonly configFactory = () => this.resolveConfig().toPromise();
    
      constructor(protected baseSiteService: BaseSiteService) {}
    
      protected resolveConfig(): Observable<I18nConfig> {
        return this.baseSiteService.getActive().pipe(
          take(1),
          map((baseSite) => ({
            i18n: {
              backend: {
                // initialize your i18n backend path using the basesite value:
                loadPath: `https://backend.org/${baseSite}/messages?lang={{lng}}&group={{ns}}`,
              },
            },
          }))
        );
      }
    }
    

    and provide it in your module (i.e. in app.module):

    @NgModule({
      providers: [
        {
          provide: CONFIG_INITIALIZER,
          useExisting: I18nBackendPathConfigInitializer,
          multi: true,
        },
      ],
      /* ... */
    })
    

    Note: the above solution assumes the active basesite is set only once, on app start (which is the case in Spartacus by default).