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

JerryWang_汪子熙 - 2022-07-12 20:10:18

---

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 使用。

Tags 标签

javascript前端react.jshtml5bootstrap

扩展阅读