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

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

從元件的模板檔案裡能看出，這些 radio input 的資料，來自 Observable 物件 supportedDeliveryModes$：

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

後者透過服務類 checkoutDeliveryService 的 getSupportedDeliveryModes 獲得。

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

對應的 HTTP 請求為：

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

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

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

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

此時 delivery modes 還是空的：
![](https://img-blog.csdnimg.cn/img_convert/b8c178466430354ca9b83c8a1642c91d.png)

如果為空，filter 執行完畢後就結束了。
稍後 delivery modes 從後臺讀取完畢之後：
![](https://img-blog.csdnimg.cn/img_convert/8274b8ad3664b0dc03ed73facd9b93a2.png)

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

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

然後再看 getSelectedDeliveryMode：

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

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

第二次觸發：
![](https://img-blog.csdnimg.cn/img_convert/ac2abade733f2fd49741573e9add05ef.png)

pipe 具有管道功能，把多個運算子連線起來：
![](https://img-blog.csdnimg.cn/img_convert/c269ef30cb356728ee088e86fd3d1332.png)

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

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

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

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

delivery Mode 的選中與否狀態，透過 selected 標誌位區分，這些資料，全部來自 CheckoutStepsState，後者儲存於 ngrx store 裡：

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

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

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

除錯之後發現，第 175 行程式碼首先觸發：

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

對應的 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 模型上：

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

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

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

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

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

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

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 檔案。

SAP 電商雲 Spartacus UI 的交貨模式 Delivery Mode 設計

相關文章