https://sap.github.io/spartacus-docs/extending-checkout

> The checkout feature in Spartacus is CMS-driven, which means every page in the checkout flow is based on CMS pages, slots and components.

Spartacus 中的 checkout 功能也是 CMS-driven. checkout flow 中每個頁面都基於 CMS page，slots 和 Components.

# Routing and Configuration

> In the checkout, you often have links from one step to another, which is the reason for registering each checkout page as a semantic page in the storefront configuration.

在 checkout 流程裡，我們通常從一個連結跳轉到另一個連結，因此 Spartacus 採取在 Storefront 配置裡，將每個 checkout page 註冊成 semantic page.

預設的 checkout 配置：
![](https://img-blog.csdnimg.cn/img_convert/e2676cbf7540ebcc2451a183ef2244d6.png)

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

> Although the default checkout has four steps, the default configuration defines five semantic pages.

> This additional page has a general checkout route that is linked to from every component that should redirect to the checkout. From this general checkout page, Spartacus redirects to the correct checkout step.

雖然預設的 checkout 只有4個步驟，但是配置裡包含了5個semantic 頁面，具有一個通用的路由，路徑為 route.

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

4個步驟對應的頁面：

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

> If you want to link to the checkout, always point to this general checkout page, regardless of how your checkout is set up. For example, with a multi-step checkout, you can use your CheckoutGuard to take care of redirecting to the correct checkout step.

使用自己實現的 CheckoutGuard 跳轉到正確的 checkout step 上去。

> With a single-step checkout, you can set all components on this checkout route and remove the CheckoutGuard from the component configuration.

如果要實現單步 checkout 步驟，從 Component configuration 中移除 CheckoutGuard.

> Aside from the route configuration, you can also configure the checkout by defining the responsibility of each step, the route to the page, and the order of the steps. The following is the default configuration:

```typescript
B2cStorefrontModule.withConfig({
  checkout: {
    steps: [
      {
        id: 'shippingAddress',
        name: 'checkoutProgress.shippingAddress',
        routeName: 'checkoutShippingAddress',
        type: [CheckoutStepType.SHIPPING_ADDRESS],
      },
      {
        id: 'deliveryMode',
        name: 'checkoutProgress.deliveryMode',
        routeName: 'checkoutDeliveryMode',
        type: [CheckoutStepType.DELIVERY_MODE],
      },
      {
        id: 'paymentDetails',
        name: 'checkoutProgress.paymentDetails',
        routeName: 'checkoutPaymentDetails',
        type: [CheckoutStepType.PAYMENT_DETAILS],
      },
      {
        id: 'reviewOrder',
        name: 'checkoutProgress.reviewOrder',
        routeName: 'checkoutReviewOrder',
        type: [CheckoutStepType.REVIEW_ORDER],
      },
    ],
  },
})
```

* id：checkout step 的唯一標識
* name：used in the CheckoutProgress component to indicate which checkout steps have been completed.

用於 CheckoutProgress 中，標識當前已經完成了哪一個 checkout 步驟。
![](https://img-blog.csdnimg.cn/img_convert/f1b0caa9f6061847f6352e28b0733a4e.png)

* routeName：specifies the semantic page for each step - 每個 checkout 步驟的 semantic 頁面名稱
* type：用於 checkout guards

steps 陣列裡的步驟決定了 checkout 次序。

> Every checkout component is a CMS component.

每個 checkout Component 都是 CMS Component.

> Furthermore, in the default checkout, all components are CMSFlexComponents.

進一步的說，每一個 Component 都是 CMSFlexComponents.

> For Angular or web components that do not need any data from CMS (for example, login), you can use the CMS component of type CMSFlexComponent as a placeholder.

對於那些不需要來自 CMS 資料的 Angular 或者 Web Component，我們可以使用 型別為 CMSFlexComponent 的 CMS Component，作為 placeholder.這種型別的 Component，具有特殊的 flexType 屬性，在 Spartacus CMS mapping 中，flexType 屬性被使用。

> these components have more guards defined in the configuration, but are otherwise identical to regular CMS components.

CMSFlexComponent 在配置裡具有更多的 guards，除此之外，同普通的 CMS Component 沒有什麼區別。

> The checkout uses component guards instead of page guards. You protect routes by applying guards in the CMS component mapping.

* checkout 步驟使用 Component guard，而不是 page guard.
* 在 CMS Component mapping 裡定義 guard.

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

Spartacus 提供了下列的 Component guard：

(1) ShippingAddressSetGuard
(2) DeliveryModeSetGuard
(3) PaymentDetailsSetGuard
(4) CheckoutGuard

> As an example, if you wanted to restrict access to the Review Order page, so that it displays only when the shipping address, delivery mode and payment details were correctly set, you would set guards for the review order component to guards: [ShippingAddressSetGuard, DeliveryModeSetGuard, PaymentDetailsSetGuard].

例如，假設需求是 Review Order Page 只有在前三個步驟都透過的時候才能開啟，則給 Review order Component 設定如下的 guard：

```typescript
[ShippingAddressSetGuard, DeliveryModeSetGuard, PaymentDetailsSetGuard]
```

> when you try to access the Review Order page, Spartacus first checks the guards for every component on that page, and only displays the page if every guard returns true. If one of the guard returns false, or returns a redirect URL, Spartacus redirects to the provided URL.

因此，當試圖訪問 Review Order 頁面時，Spartacus 首先遍歷這個頁面所有的 Component guards，只有這些 guard 全部返回 true 之後，才能開啟 Review order 頁面。

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

> The order of the guards is important because the first redirect is used. In general, you should define guards in the same order as the checkout flow.

Component guard 最先返回哪個 redirect url，使用者就被重定向到哪個 url 去。所以 Component guard 的順序很重要。

# 如何定義重定向 url

> In the checkout configuration, for each step, you specify a type attribute and the type of data that should be set. A guard looks for the first step that contains the specific type and then redirects to this step.

> For example, ShippingAddressSetGuard searches the checkout configuration for the first step with a type containing **CheckoutStepType.shippingAddress**, then reads the step route and redirects to that page.

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

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

# CMS Catalog Content and Default Template

點選購物車按鈕後，跳轉到 checkout route：

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

當從 cart 跳轉到 checkout 時，有一個 cancel 操作，cancel 的是 checkout default step：
![](https://img-blog.csdnimg.cn/img_convert/7b4e126416f684afc882f100afd97e08.png)

然後發起向 checkout/shipping-address 的請求：

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

最終跳轉到 shipping address url：
![](https://img-blog.csdnimg.cn/img_convert/f7ac9b2207dfcb3887574a3266cb3b16.png)

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

http://localhost:4200/electronics-spa/en/USD/checkout

> In the default checkout, Spartacus uses a modified MultiStepCheckoutOrderSummaryPageTemplate.

如下圖所示：
![](https://img-blog.csdnimg.cn/img_convert/176d8fff705f571003ff87b1d5730e6d.png)

包含 16個 content slot：
![](https://img-blog.csdnimg.cn/img_convert/91c7a54d149aad6de6c4d24dfc5bb8a7.png)

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

# 調換 checkout 步驟的順序

一個例子：

> The following scenario describes how to change the order of two steps. In the default configuration, the checkout flow starts with setting a shipping address, followed by setting the delivery mode, and finally by filling in the payment details. In this scenario, the configuration is modified so that the payment details step occurs before the delivery mode step.

```typescript
@NgModule({
  imports: [
    B2cStorefrontModule.withConfig({
      ...restOfConfig,
      checkout: {
        // You must specify all of the steps (this configuration is not merged with the default one)
        steps: [
          {
            id: 'shippingAddress',
            name: 'checkoutProgress.shippingAddress',
            routeName: 'checkoutShippingAddress',
            type: [CheckoutStepType.SHIPPING_ADDRESS],
          },
          // Change the payment details step to be before the delivery mode
          {
            id: 'paymentDetails',
            name: 'checkoutProgress.paymentDetails',
            routeName: 'checkoutPaymentDetails',
            type: [CheckoutStepType.PAYMENT_DETAILS],
          },
          {
            id: 'deliveryMode',
            name: 'checkoutProgress.deliveryMode',
            routeName: 'checkoutDeliveryMode',
            type: [CheckoutStepType.DELIVERY_MODE],
          },
          {
            id: 'reviewOrder',
            name: 'checkoutProgress.reviewOrder',
            routeName: 'checkoutReviewOrder',
            type: [CheckoutStepType.REVIEW_ORDER],
          },
        ],
      },
      cmsComponents: {
        CheckoutPaymentDetails: {
          component: PaymentMethodsComponent,
          // The default CheckoutPaymentDetails uses the DeliveryModeSetGuard, but in this case, the delivery mode details will not be set yet.
          // Instead, override the component guards with a new set that does not include the DeliveryModeSetGuard
          guards: [AuthGuard, CartNotEmptyGuard, ShippingAddressSetGuard],
        },
        CheckoutDeliveryMode: {
          component: DeliveryModeComponent,
          // In the CheckoutDeliveryMode, we need to also check if the payment details are set, so we add the PaymentDetailsSetGuard
          guards: [
            AuthGuard,
            CartNotEmptyGuard,
            ShippingAddressSetGuard,
            PaymentDetailsSetGuard,
          ],
        },
      },
    }),
  ],
  bootstrap: [StorefrontComponent],
})
export class AppModule {}
```

CheckoutPaymentDetails Component，只有在進入 payment step 時才載入：
![](https://img-blog.csdnimg.cn/img_convert/d7349dcf0166f663b9d34113c5bef42f.png)

CheckoutPaymentDetails
![](https://img-blog.csdnimg.cn/img_convert/8023323a8a0b089ceff2baa4147822c3.png)

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

在 CMS Component mapping 裡指定 Component guard：

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

SAP Spartacus 中的 checkout(結帳) 設計

相關文章