SAP Spartacus checkout 流程的扩展(extend)实现介绍

简介: SAP Spartacus checkout 流程的扩展(extend)实现介绍

Spartacus中的 checkout 特性是CMS驱动的,这意味着 checkout 流中的每个页面都基于CMS页面、slots 和 Component。因此,开发可以更改每个页面的内容、添加新组件、将 checkout 转换为单步骤签出,或者在店面应用程序中只需要少量配置就可以创建非常复杂的多步骤 checkout 工作流。


在 checkout 过程中,通常有从一个步骤到另一个步骤的链接,这就是将每个 checkout 页面注册为店面配置中的 semantic page 的原因。


checkout 的默认路由配置如下:

provideConfig({
  routing: {
    routes: {
      checkout: {
        paths: ['checkout'],
      },
      checkoutShippingAddress: {
        paths: ['checkout/shipping-address']
      },
      checkoutDeliveryMode: {
        paths: ['checkout/delivery-mode']
      },
      checkoutPaymentDetails: {
        paths: ['checkout/payment-details']
      },
      checkoutReviewOrder: {
        paths: ['checkout/review-order']
      }
    },
  },
}),

上述代码的位置:default-routing-config.ts


虽然默认的 checkout 有四个步骤,但是默认的配置定义了五个语义页面。这个附加页面有一个通用的 checkout 路由,它链接到每个应该重定向到 checkout 的组件。从这个常规 checkout 页面,Spartacus重定向到具体而正确的 checkout step 步骤。


如果您想链接到 checkout,那么无论您的 checkout 流程具体是如何设计的,都要指向这个通用结帐页面。比如,对于多步骤 checkout,可以使用 CheckoutGuard 来重定向到正确的checkout 步骤。


通过单步checkout,您可以在这个签出路由上设置所有组件,并从组件配置中删除CheckoutGuard。


除了路由配置之外,还可以通过定义每个步骤的职责、到页面的路由和步骤的顺序来配置 checkout. 默认配置如下:

  • id 属性应该有一个惟一的值。当需要标识配置中的特定步骤时,可以使用id。
  • CheckoutProgress 组件中使用name属性来指示哪些签出步骤已经完成。该名称也用作翻译键。
  • routeName属性为每个步骤指定语义页。
  • type 属性由 checkout guards 使用。
相关文章
|
27天前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
10 0
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
4月前
|
UED
使用 SAP CRM Application Enhancement Tool 创建类型为下拉菜单的扩展字段
使用 SAP CRM Application Enhancement Tool 创建类型为下拉菜单的扩展字段
29 0
|
4月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
4月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
40 0
|
4月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
24 0
|
6月前
|
JSON JavaScript 前端开发
一种在 ABAP 端扩展 SAP Fiori 应用的方法介绍
一种在 ABAP 端扩展 SAP Fiori 应用的方法介绍
30 0
|
7月前
|
存储 API UED
关于 SAP UI5 扩展标准应用的两种方式
关于 SAP UI5 扩展标准应用的两种方式
38 1
|
7月前
|
Web App开发 XML 数据格式
SAP Fiori Elements List Report 表格新增列扩展方式的工作原理试读版
SAP Fiori Elements List Report 表格新增列扩展方式的工作原理试读版
42 0
|
7月前
关于 SAP Fiori Elements 应用的 ResponsiveTableColumnsExtension 扩展
关于 SAP Fiori Elements 应用的 ResponsiveTableColumnsExtension 扩展
32 0
|
7月前
如何通过扩展(Extension)的方式给 SAP Fiori Elements List Report 的表格新增列试读版
如何通过扩展(Extension)的方式给 SAP Fiori Elements List Report 的表格新增列试读版
38 0