乐趣区

关于javascript: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 应用。
退出移动版