#angular #spartacus-storefront
#angular #spartacus-витрина
Вопрос:
как я могу заставить 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>
Ответ №1:
Большая часть логики, связанной с загрузкой макета, связана с маршрутизацией внутри CmsPageGuard
, и в вашем случае навигация не происходит.
Итак, вы можете либо попытаться подделать его (выполнить навигацию в вашем компоненте), либо попытаться выполнить все шаги вручную. Я думаю, что нужно установить правильный контекст страницы ( RoutingService.getPageContext()
) и вызвать CmsService.getPage
(или hasPage
) для запуска загрузки. Не уверен, что это все, но я думаю, что это хорошее начало (и у вас должны быть загружены данные макета и слотов).
Комментарии:
1. Спасибо, я попробую это.
2. Я настроил пустые слоты, потому что я хочу иметь только заголовок. Когда я загружаю основной модуль вместо использования entryComponents, он работает так, как ожидалось, единственная проблема заключается в том, что он изменяет URL-адрес в браузере, а я этого не хочу, потому что позже у меня есть два веб-компонента, которые должны показывать только верхний / нижний колонтитул, не касаясь URL-адреса (на начальном этапезагрузить).