https://sap.github.io/spartacus-docs/extending-checkout
在 checkout 流程里，我们通常从一个链接跳转到另一个链接，因此 Spartacus 采取在 Storefront 配置里，将每个 checkout page 注册成 semantic page.
默认的 checkout 配置：
虽然默认的 checkout 只有4个步骤，但是配置里包含了5个semantic 页面，具有一个通用的路由，路径为 route.
4个步骤对应的页面：
使用自己实现的 CheckoutGuard 跳转到正确的 checkout step 上去。
如果要实现单步 checkout 步骤，从 Component configuration 中移除 CheckoutGuard.
id：checkout step 的唯一标识
name：used in the CheckoutProgress component to indicate which checkout steps have been completed.
用于 CheckoutProgress 中，标识当前已经完成了哪一个 checkout 步骤。
- routeName：specifies the semantic page for each step - 每个 checkout 步骤的 semantic 页面名称
- type：用于 checkout guards
steps 数组里的步骤决定了 checkout 次序。
- checkout 步骤使用 Component guard，而不是 page guard.
- 在 CMS Component mapping 里定义 guard.
Spartacus 提供了下列的 Component guard：
(1) ShippingAddressSetGuard
(2) DeliveryModeSetGuard
(3) PaymentDetailsSetGuard
(4) CheckoutGuard
因此，当试图访问 Review Order 页面时，Spartacus 首先遍历这个页面所有的 Component guards，只有这些 guard 全部返回 true 之后，才能打开 Review order 页面。
Component guard 最先返回哪个 redirect url，用户就被重定向到哪个 url 去。所以 Component guard 的顺序很重要。
如何定义重定向 url
CMS Catalog Content and Default Template
点击购物车按钮后，跳转到 checkout route：
当从 cart 跳转到 checkout 时，有一个 cancel 操作，cancel 的是 checkout default step：
最终跳转到 shipping address url：
http://localhost:4200/electronics-spa/en/USD/checkout
如下图所示：
包含 16个 content slot：
调换 checkout 步骤的顺序
一个例子：
@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 时才加载：
CheckoutPaymentDetails
在 CMS Component mapping 里指定 Component guard：
