Блог

как я могу заставить Spartacus загружать определенный шаблон из серверной части, когда основной модуль не загружается (веб-компонент)?

Мой вариант использования следующий:

У меня есть сайт, который создается с помощью ускорителя. Я хотел бы перенести его на «Спартак» шаг за шагом. Сначала верхний, затем нижний колонтитул, а затем все остальное (перейдите только из accelerator в SPA). Мой пользовательский нижний колонтитул и заголовок работают в Spartacus SPA. Чтобы интегрировать их в accelerator, я создаю веб-компоненты для верхнего и нижнего колонтитулов с помощью ngx-build-plus. Они работают, но отображают только статическую часть компонента, а не слоты Spartacus. Я также не вижу запроса к серверной части.

AppModule:

 @NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    B2cStorefrontModule.withConfig({
      backend: {
        occ: {
          baseUrl: environment.occBaseUrl,
          prefix: environment.occPrefix,
        },
      },
      context: {
        baseSite: ['de'],
        language: ['en'],
        currency: ['EUR'],
        urlParameters: ['baseSite', 'language'],
      },
      i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en',
      },
      features: {
        level: '2.1',
      },
      breakpoints: {
        xs: 576,
        sm: 768,
        md: 992,
        lg: 1920,
      },
      layoutSlots: {
        WebxHomepageTemplate: {
          slots: [],
        },
      },
    }),
    BrowserTransferStateModule,
    UiHeaderModule,
  ],
  entryComponents: [AppComponent],
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}
  ngDoBootstrap(): void {
    const elm = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('wc-header', elm);
  }
}
 

Шаблон компонента приложения:

 <cx-storefront>
  <ng-template cxOutletRef="header">
    <ui-header></ui-header>
  </ng-template>
</cx-storefront>
 

Большая часть логики, связанной с загрузкой макета, связана с маршрутизацией внутри CmsPageGuard , и в вашем случае навигация не происходит.

Итак, вы можете либо попытаться подделать его (выполнить навигацию в вашем компоненте), либо попытаться выполнить все шаги вручную. Я думаю, что нужно установить правильный контекст страницы ( RoutingService.getPageContext() ) и вызвать CmsService.getPage (или hasPage ) для запуска загрузки. Не уверен, что это все, но я думаю, что это хорошее начало (и у вас должны быть загружены данные макета и слотов).