Extend Spartacus NGRX Store with additional data

Question

For our Spartacus project, we need to introduce additional Data properties in the checkout: We have the case, that the user needs to select a delivery mode per product.

In an ideal world, upon selection, the selected delivery mode would be saved in the NGRX Store and also in the Backend to stay within the principle of the data binding defined here: https://sap.github.io/spartacus-docs/connecting-to-other-systems/#component-data-binding

Expected Data / User flow:

1. User goes to Checkout and to Delivery Mode Step
2. Custom OCC Call is made to load the supported delivery modes for each product (depends on product type and further customer specific logic)
3. The cart items are displayed, enhanced with a dropdown containing the available delivery modes
4. The user selects a delivery mode
5. The selected delivery mode is stored on the cart entry within the NGRX Store and saved in the backend
6. The new Cart totals is calculated based on the costs of the selected delivery mode
7. The new Cart totals is stored on the cart within the NGRX Store and saved in the backend
8. The user clicks on continue to get to the Review Order Step
9. The cart items are listed with the previously selected delivery mode

After some analysis of the existing code, we found a property deliveryMode on the orderEntry. This does not seem to be used anywhere in spartacus, but could be used to make Step 9 work by following this stackoverflow answer and this one.

Questions regarding this flow:

• How can we extend the NGRX Store? We assume, it would be possible to just extend the facade (Active Cart Service), bypass the store and save the information in the backend (Described here) and afterwards refresh the store from the backend. Is that Assumption correct? If yes, that feels awkward though, as we need to reload the whole store just to contain the new property deliveryMode on the orderEntry
• How can we hook into the price calculation of the cart totals to update the total based on the selected delivery mode? And again, how can we bring the new total sum into the store?

There seem to be several Answers within the Slack Channel without very few usable answers around extending the ngrx store, even though for us, it seems to be a quit normal task.. :-/

Any thoughts, inputs or support would be very appreciated. :-)

Answer 1

This seems like a difficult thing to accomplish seeing as delivery modes per product aren't supported as-is in spartacus. But some ideas:

• You can extend core CartEntry classes (adapter, connecter, facade, etc.) to include the delivery mode for entries added to the cart. You will probably need to change all to include the delivery mode setting(s). All of these are exposed so you can modify them as needed including the store.

• Utilizing multiple carts to have a product per cart and set delivery mode that way. But this would be cumbersome in my opinion.

As far as price calculation goes, I'm assuming OCC calls return total prices. Does the call for the cart entries include delivery mode costs per entry?

Answer 2

We have implemented the following work around and it works so far:

1. Enhance the Cart Model in the backend
2. Add new Endpoints to load the available delivery Modes per Product (by bypassing the NGRX Store)
3. Add new Endpoints to save the selected Delivery Mode (by bypassing the NGRX Store)
4. After Save Endpoint, a cart Reload is triggered, which loads the new cart totals having a custom property on the order entry (via type augmentation) into the store from the backend