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

简介: Spartacus中的 checkout 特性是CMS驱动的,这意味着 checkout 流中的每个页面都基于CMS页面、slots 和 Component。

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. 默认配置如下:

56.png

  • id 属性应该有一个惟一的值。当需要标识配置中的特定步骤时,可以使用id。
  • CheckoutProgress 组件中使用name属性来指示哪些签出步骤已经完成。该名称也用作翻译键。
  • routeName属性为每个步骤指定语义页。
  • type 属性由 checkout guards 使用。

目录
相关文章
|
6月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
38 0
|
6月前
|
存储
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
51 0
|
6月前
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
65 0
|
6月前
|
API
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
49 0
|
3月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
3月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
40 0
|
3月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
24 0
|
6月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
46 0
|
6月前
|
JavaScript 容器
关于 SAP Spartacus generic-link component 的模板代码
关于 SAP Spartacus generic-link component 的模板代码
42 2
|
6月前
|
前端开发 JavaScript API
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略
31 0