Delivery mode design of Spartacus UI of SAP e-commerce cloud

This article discusses Spartacus UI checkout When the process , The two delivery modes highlighted in the figure below ,Delivery Mode The source of the data ：

It can be seen from the template file of the component , these radio input The data of , come from Observable object supportedDeliveryModes$：

The latter is through the service class checkoutDeliveryService Of getSupportedDeliveryModes get .

Corresponding HTTP Request for ：

https://localhost:9002/occ/v2...

supportedDeliveryModes$ once subscribe, Will trigger its pipe A series of passed in methods Operators：

here delivery modes Or empty? ：

If it is empty ,filter When it's done, it's over .
later delivery modes After reading from the background ：

Last , Passed filter and distinctUntilChanged Of delivery modes, Templated async The parsing ：

And then look at it getSelectedDeliveryMode：

When first triggered ,deliveryMode by null.

The second trigger ：

pipe With pipeline function , Connect multiple operators ：

The next step we need to find out is , This premium-gross How it is selected by default ？

Its value comes from withLatestFrom the other one Observable The contribution of ：this.checkoutDeliveryService.getSelectedDeliveryMode:

delivery Mode Check or not status of , adopt selected Flag bit differentiation , These data , All from CheckoutStepsState, The latter is stored in ngrx store in ：

stay checkout.reducer.ts The first 88 Xing He 175 Line set breakpoint ：

After debugging, I found , The first 175 Line of code first triggers ：

Corresponding HTTP The request is ：

https://localhost:9002/occ/v2...(FULL),deliveryMode,paymentInfo(FULL)&lang=en&curr=USD

Selected delivery mode Stored in cart Model ：

Read supported delivery mode It's through checkout.effect.ts To complete ：

Spartacus 4.0 Introduced checkout library. The code related to checkout has been changed from @spartacus/core and @spartacus/storefrontlib Removed from the , And move to one of the entry points of the new checkout Library .

The checkout library is divided into the following entry points ：

@spartacus/checkout/assets: Resources related to internationalization .
@spartacus/checkout/components： dependent UI Components ,guards and UI service.
@spartacus/checkout/core
checkout facade API The concrete realization of , contain connectors, event builder, event listener, models, other services, as well as state management.
@spartacus/checkout/occ

checkout related adapters as well as converters.