SAP Spartacus Site Context：专题页面最佳实践

2024-01-25 03:57:31

使用 SAP Spartacus Site Context 创建引人入胜的专题页面

在当今的电子商务格局中，专题页面已成为营销特定主题、产品或活动的中心舞台。这些页面超越了传统产品目录，为客户提供了定制的购物体验，展示了精挑细选的产品、定制内容和互动元素。为了迎合这一不断增长的需求，SAP Spartacus 推出了 Site Context，一组功能强大的工具，使开发人员能够轻松构建和管理这些页面。

Site Context 实现剖析

Site Context 的实现建立在八个核心组件之上：

site-context.module.ts： Site Context 模块的根模块，引入了其他所有组件。
site-context.service.ts： Site Context 服务，负责管理 Site Context 数据，例如获取和更新。
context-routing.module.ts： Site Context 的路由模块，定义了路由并将其映射到组件。
context.component.ts： Site Context 组件，呈现 Site Context 数据。
context.component.html： Site Context 组件的 HTML 模板，用于渲染数据。
page-layout.component.ts： 页面布局组件，定义 Site Context 页面的结构。
page-layout.component.html： 页面布局组件的 HTML 模板，用于布局页面元素。

通过结合使用这些组件，开发人员可以创建和管理定制的专题页面，提供卓越的客户体验。

使用 Site Context 创建专题页面

要使用 Site Context 创建专题页面，请按照以下步骤操作：

在 app.module.ts 中导入 SiteContextModule。
在组件中使用 SiteContextService 获取 Site Context 数据。
使用 SiteContextComponent 和 PageLayoutComponent 呈现数据。

示例代码：

// app.component.ts
import { SiteContextService } from '@spartacus/core';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  siteContext$ = this.siteContextService.getSiteContext();

  constructor(private siteContextService: SiteContextService) {}
}

<!-- app.component.html -->
<site-context></site-context>

// site-context.component.ts
import { Component } from '@angular/core';
import { SiteContextService } from '@spartacus/core';

@Component({
  selector: 'site-context',
  templateUrl: './site-context.component.html',
})
export class SiteContextComponent {
  siteContext$ = this.siteContextService.getSiteContext();

  constructor(private siteContextService: SiteContextService) {}
}

<!-- site-context.component.html -->
<ng-container *ngIf="siteContext$ | async as siteContext">
  <h1>{{ siteContext.name }}</h1>
  <p>{{ siteContext.description }}</p>
</ng-container>