Feature module

The cart feature module includes all the presentation logic required to display the cart screen. If you need to include this module, add it to your build.gradle:

implementation ("com.poqstudio:checkout.cart:$VERSION_NAME")

Architecture

The general architecture of the Cart screen
The general architecture of the Cart screen

  • CartActivity is the entry point to the Cart screen.
  • CartFragment handles the action bar menu items (edit/done button).
  • CartView controls the visibility of the elements in the screen. It also initialises CartRecyclerViewAdapter with the information received from CartViewModel and handles the navigation of the screen.
  • BaseCartItemViewHolder is the view holder for the cart item block.
  • CartItemViewModel is the ViewModel for the cart item block.
  • BaseVoucherTitleCartItemViewHolder is the view holder for the vouchers section title.
  • BaseAppliedVoucherCartItemViewHolder is the view holder for the applied vouchers block.
  • AppliedVoucherCartItemViewModel is the ViewModel for the applied vouchers block.
  • BaseAddVoucherCartItemViewHolder is the view holder for the add vouchers block.
  • AddVoucherCartItemViewModel is the ViewModel for the add vouchers block.
  • BaseCustomCartItemViewHolder is the view holder for your custom blocks.
  • CartViewModel is the main ViewModel that coordinates the rest of the ViewModels.
  • CartStateViewModel is responsible for executing the domain interactors and exposes the state of the screen.
  • CheckoutPanelViewModel receives the cart model and exposes the necessary data to present CheckoutPanelView.
  • CartStore handles the edit mode and its actions, keeping the copy of the edited items.

Views breakdown

The Cart screen is broken down into different views:

The Views in the Cart screen
The Views in the Cart screen

ViewXMLAlias
CartActivityactivity_cart.xml
CartFragmentfragment_cart.xml
CartViewcart_view.xmlcartViewLayout
CheckoutPanelViewcheckout_panel_view.xmlcheckoutPanelViewLayout
BaseCartItemViewHolderitem_cart_list.xmlitemCartListLayout
BaseVoucherTitleCartItemViewHolderitem_cart_list_voucher_title.xmlitemCartListLayout
BaseAppliedVoucherCartItemViewHolderitem_cart_list_applied_voucher.xmlitemCartListAppliedVoucherLayout
BaseAddVoucherCartItemViewHolderitem_cart_list_add_voucher.xmlitemCartListAddVoucherLayout
BaseCustomCartItemViewHolderitem_cart_list_custom.xmlitemCartListCustomLayout
QuantitySelectorquantity_selector.xmlquantitySelectorLayout
ShimmerCartViewplace_holder_cart.xmlshimmerCartLayout

Styles breakdown

The recommended way of styling Cart screen is by using App Styling. If you need more granular customisation, you can override the specific style and provide your own. The styles for the Cart screen are shown in the images below:

Style elements in the Cart screen
Style elements in the Cart screen

Style elements in the Cart screen - Vouchers Section
Style elements in the Cart screen - Vouchers Section