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 中每個(gè)頁(yè)面都基于 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 流程里，我們通常從一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)鏈接，因此 Spartacus 采取在 Storefront 配置里，將每個(gè) checkout page 注冊(cè)成 semantic page.

默認(rèn)的 checkout 配置：

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.

雖然默認(rèn)的 checkout 只有4個(gè)步驟，但是配置里包含了5個(gè)semantic 頁(yè)面，具有一個(gè)通用的路由，路徑為 route.

4個(gè)步驟對(duì)應(yīng)的頁(yè)面：

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.

使用自己實(shí)現(xiàn)的 CheckoutGuard 跳轉(zhuǎn)到正確的 checkout step 上去。

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

如果要實(shí)現(xiàn)單步 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:

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 的唯一標(biāo)識(shí)
• name：used in the CheckoutProgress component to indicate which checkout steps have been completed.

用于 CheckoutProgress 中，標(biāo)識(shí)當(dāng)前已經(jīng)完成了哪一個(gè) checkout 步驟。

• routeName：specifies the semantic page for each step - 每個(gè) checkout 步驟的 semantic 頁(yè)面名稱(chēng)
• type：用于 checkout guards

steps 數(shù)組里的步驟決定了 checkout 次序。

Every checkout component is a CMS component.

每個(gè) checkout Component 都是 CMS Component.

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

進(jìn)一步的說(shuō)，每一個(gè) 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.

對(duì)于那些不需要來(lái)自 CMS 數(shù)據(jù)的 Angular 或者 Web Component，我們可以使用 類(lèi)型為 CMSFlexComponent 的 CMS Component，作為 placeholder.這種類(lèi)型的 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 沒(méi)有什么區(qū)別。

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.

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].

例如，假設(shè)需求是 Review Order Page 只有在前三個(gè)步驟都通過(guò)的時(shí)候才能打開(kāi)，則給 Review order Component 設(shè)置如下的 guard：

[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.

因此，當(dāng)試圖訪問(wèn) Review Order 頁(yè)面時(shí)，Spartacus 首先遍歷這個(gè)頁(yè)面所有的 Component guards，只有這些 guard 全部返回 true 之后，才能打開(kāi) Review order 頁(yè)面。

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 最先返回哪個(gè) redirect url，用戶(hù)就被重定向到哪個(gè) 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.

CMS Catalog Content and Default Template

點(diǎn)擊購(gòu)物車(chē)按鈕后，跳轉(zhuǎn)到 checkout route：

當(dāng)從 cart 跳轉(zhuǎn)到 checkout 時(shí)，有一個(gè) cancel 操作，cancel 的是 checkout default step：

然后發(fā)起向 checkout/shipping-address 的請(qǐng)求：

最終跳轉(zhuǎn)到 shipping address url：

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

In the default checkout, Spartacus uses a modified MultiStepCheckoutOrderSummaryPageTemplate.

如下圖所示：

包含 16個(gè) content slot：

調(diào)換 checkout 步驟的順序

一個(gè)例子：

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.

@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 DeliveryModeSetGuardguards: [AuthGuard, CartNotEmptyGuard, ShippingAddressSetGuard],},CheckoutDeliveryMode: {component: DeliveryModeComponent,// In the CheckoutDeliveryMode, we need to also check if the payment details are set, so we add the PaymentDetailsSetGuardguards: [AuthGuard,CartNotEmptyGuard,ShippingAddressSetGuard,PaymentDetailsSetGuard,],},},}),],bootstrap: [StorefrontComponent], }) export class AppModule {}

CheckoutPaymentDetails Component，只有在進(jìn)入 payment step 時(shí)才加載：

CheckoutPaymentDetails

在 CMS Component mapping 里指定 Component guard：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus 中的 checkout(结帐) 设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。