Shopping cart

The shopping cart in Litium Accelerator is built as a React component. It displays the CartViewModel, built by the CartViewModelBuilder. You can also build the shopping cart in another library or framework.

To understand how this works, let us look at the components that are needed:

Back end:

• CartController: a WebAPI controller to communicate with the React component.
• CartViewModelBuilder: a model builder that is part of the Business Logic Layer (BLL). Please read more about the BLL here.
• CartContext: to handle the shopping experience with providing the Cart and CheckoutFlowInfo.
• ClientContextViewModelBuilder: to build the client context view model, which contains the cart's data. This client context is returned to the client via the DOM content, so that the cart component can use it. Please read more about it in the article about the architecture of Litium Accelerator.

Front end:

• MiniCart.js: the mini cart component that is shown in the top-right corner of every page.
• Cart.js: the cart component that is shown on the checkout page.
• Checkout.js: the checkout component that contain Cart.
• Cart.action.js: the Redux action for the cart.
• Cart.reducer.js: the Redux reducer for the cart.