SAP 电商云 Spartacus UI 的交货模式 Delivery Mode 设计
本文討論 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 设计的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: wmv格式用手机怎么看(视频格式转换器大
- 下一篇: 二手房商业贷款流程及条件