Spartacus中的 checkout 特性是CMS驅動的，這意味著 checkout 流中的每個頁面都基於CMS頁面、slots 和 Component。因此，開發可以更改每個頁面的內容、新增新元件、將 checkout 轉換為單步驟簽出，或者在店面應用程式中只需要少量配置就可以建立非常複雜的多步驟 checkout 工作流。

在 checkout 過程中，通常有從一個步驟到另一個步驟的連結，這就是將每個 checkout 頁面註冊為店面配置中的 `semantic page` 的原因。

checkout 的預設路由配置如下:

```typescript
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. 預設配置如下:

![](https://img-blog.csdnimg.cn/img_convert/791914af2a372cb5a36a251d99e7cd78.png)

- id 屬性應該有一個惟一的值。當需要標識配置中的特定步驟時，可以使用id。

- 在 `CheckoutProgress` 元件中使用name屬性來指示哪些簽出步驟已經完成。該名稱也用作翻譯鍵。

- routeName屬性為每個步驟指定語義頁。

- type 屬性由 `checkout guards` 使用。

SAP Spartacus checkout 流程的擴充套件(extend)實現介紹

相關文章