Spartacus Storefront Multisite I18n with Backend

Question

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

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.
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?

Krzysztof Platis Krzysztof Platis · Accepted Answer · 2021-05-18T14:34:01

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).

Spartacus Storefront Multisite I18n with Backend

1 Answers