本文討論 Spartacus UI checkout 流程時，下圖高亮的兩種交貨模式，Delivery Mode 的數據來源：

從組件的模板文件里能看出，這些 radio input 的數據，來自 Observable 對象 supportedDeliveryModes$：

后者通過服務類 checkoutDeliveryService 的 getSupportedDeliveryModes 獲得。

對應的 HTTP 請求為：

https://localhost:9002/occ/v2/electronics-spa/users/current/carts/00001534/deliverymodes?lang=en&curr=USD

supportedDeliveryModes$ 一旦 subscribe，就會觸發其 pipe 方法里傳入的一系列 Operators：

此時 delivery modes 還是空的：

如果為空，filter 執行完畢后就結束了。
稍后 delivery modes 從后臺讀取完畢之后：

最后，通過了 filter 和 distinctUntilChanged 的 delivery modes，被模板的 async 所解析：

然后再看 getSelectedDeliveryMode：

第一次觸發的時候，deliveryMode 為 null.

第二次觸發：

pipe 具有管道功能，把多個操作符連接起來：

下一步我們需要弄清楚的是，這個 premium-gross 是如何默認被選中的？

它的值來自 withLatestFrom 另一個 Observable 的貢獻：this.checkoutDeliveryService.getSelectedDeliveryMode:

delivery Mode 的選中與否狀態，通過 selected 標志位區分，這些數據，全部來自 CheckoutStepsState，后者存儲于 ngrx store 里：

在 checkout.reducer.ts 第 88 行和第 175 行設置斷點：

調試之后發現，第 175 行代碼首先觸發：

對應的 HTTP 請求是：

https://localhost:9002/occ/v2/electronics-spa/users/current/carts/00001534?fields=deliveryAddress(FULL),deliveryMode,paymentInfo(FULL)&lang=en&curr=USD

選中的 delivery mode 存儲在 cart 模型上：

讀取 supported delivery mode 是通過 checkout.effect.ts 來完成的：

Spartacus 4.0 引入了 checkout library. 與結帳相關的代碼已從@spartacus/core 和@spartacus/storefrontlib 移出，并移至新結帳庫的入口點之一。

結帳庫分為以下入口點：

• @spartacus/checkout/assets: 和國際化相關的資源。

• @spartacus/checkout/components：相關的 UI 組件，guards 和 UI service.

• @spartacus/checkout/core
  checkout facade API 的具體實現，包含 connectors, event builder, event listener, models, other services, 以及 state management.

• @spartacus/checkout/occ

checkout related adapters 以及 converters.

• @spartacus/checkout/root

root entity 總是通過 eager load 方式加載。包含config, events, facades, http interceptors 和 models.

• @spartacus/checkout/styles
  和 checkout 相關的 scss 文件。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP 电商云 Spartacus UI 的交货模式 Delivery Mode 设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。