Help

2 min read

Cart

The Cart is a core feature for most apps to allow the user to add items to and view their basket.

Cart 

# Cart
cart
bag

Navigating to the cart will switch to the cart tab if the cart is a tab.

Dynamic Content

Cart supports the following Dynamic Content slots:

SlotVersionWhere?
scroll-topv25+Before all scroll content, not in edit mode.
scroll-bottomv25+After all scroll content, not in edit mode.

Adding slots to a table view is less complex compared to collection views but more than stack views. You will need to customise the data source to add custom slots and map their content to CartContentBlock.slot() items.

By default the Cart is presented as the middle tab but you may want to replace this with a more engaging feature such as Swipe to Like. To allow this you can configure the app to present the Cart button globally on the navigation bar.

CartNavigationButton

  1. Open your AppModule to the didAddToPlatform or setUpCart functions.
  2. Inject the CartNavigationButton as the app-wide navigation bar button.
Container.shared.views.navigationBarButtonItem.replace { .cart }

This button can be customised or moved anywhere within your app. See the navigation button customisation docs for further details.

Vouchers & Promotions

The Cart screen supports adding vouchers using the CartService so long as the BE can support this. Vouchers requires additional API to work.

To enable vouchers:

  1. Open your AppModule to the didAddToPlatform or setUpCart function.
  2. Set the vouchers setting to true at the start of the function.
Settings.Cart.showsVouchers = true

Express Checkout Widgets

Express checkout widgets require additional API or external platform configuration to work. To add an express checkout widget:

  1. Open your AppModule to the didAddToPlatform or setUpCart function.
  2. Inject the express checkout widgets you wish to use.
Container.shared.views.checkoutWidgets.replace {[
    Container.shared.views.applePayWidget(),
    Container.shared.views.payPalWidget()
]}

Shipment Levels

From v25, the Cart supports 2 shipment levels as part of the BOPIS work.

The .checkout level changes the Cart and PDP Cart Widget to present shipment availability banners. The app defaults to a BOPIS specific banner but this can be customised to present alternate shipping eligibility. With this level the user should expect to be able to change shipment type at checkout.

The .item level changes the Cart and PDP Cart Widget to present interactive shipment selection per item. The user is able to switch between available shipment options which updates the PDP stock focus. With this level the user should expect to be able to set different shipment types per cart item.

To switch shipment levels:

  1. Open your AppModule to the didAddToPlatform or setUpCart function.
  2. Set the shipment level setting to the desired setting at the start of the function.
Settings.Cart.shipmentLevel = .checkout

Add to Cart Widget

The CartWidget is a standalone component that can be added to any screen to allow the user to add a product to cart. See the cart widget documentation for more information.

History

  • v25: State architecture rewrite, BOPIS (shipment levels) and slots.
  • v22: Added support for Cart Vouchers & Promotions.

Next steps