Commerce & Orders

Cart

Order review screen in the core commerce flow: MenuItemDetail → Cart → PickupScheduler → OrderSummary. It shows all cart lines with modifiers, supports live quantity changes, calculates subtotal/service fee/total, and forwards the pending order to the next screen via checkoutScreenId.

Flow positionCart / order review step

Sits after item detail and before pickup scheduling or summary.

Runtime datacartItems · onAddToCart · onScreenNavigate

Injected by AppPlayer in preview/runtime; builder uses placeholder content when needed.

Builder parityFull-screen sizing

Canvas sizing mirrors preview/runtime so CTA position stays aligned.

What it does

Four things worth knowing

Full order review with modifier context

Each cart row shows item title, selected options/modifiers, quantity, and line total so customers can verify the whole order before checkout.

Live quantity updates and removal

Plus/minus controls call onAddToCart with positive/negative deltas. When quantity reaches zero, items are removed from the cart state.

Subtotal, service fee, and total

Subtotal and final total are recalculated in real time. Service fee can be percentage-based (serviceFeePct) and is reflected in the displayed total.

Checkout navigation handoff

CTA routes to checkoutScreenId and passes pending order data through navigation params for Pickup Scheduler or Order Summary.

Preview note: if preview and builder look different, first verify runtime sizing props (customWidth, customHeight) and cart dimensions in componentDimensions.ts.

Builder setup

Find it, drop it, wire the flow

Where to find itAdd it to your checkout flow

Component picker → Commerce & Orders → Cart.
Place it after Menu Item Detail and before Pickup Scheduler or Order Summary.
Set checkoutScreenId so the CTA can route to the next step.

Before you publishThree things to check

Navigation wiring: checkoutScreenId (next step) and menuScreenId (empty-state return).
Content + totals: verify headerText, emptyText, emptyButtonText, and serviceFeePct.
Sizing parity: confirm cart container uses customWidth/customHeight and builder dimensions are full-height.

Category: Commerce & OrdersComponent: BuilderCartRegistry key: cartFlow: MenuItemDetail → Cart → PickupScheduler → OrderSummary

Props

Data, navigation, and content

Prop	Type	Default	Description
`cartItems`	array	Injected by AppPlayer	Current cart contents including quantities, modifiers, and pricing metadata.
`onAddToCart`, `onGoBack`, `onScreenNavigate`	function	Injected by AppPlayer	Callbacks for quantity updates, back behavior, and screen routing.
`checkoutScreenId`, `menuScreenId`	string	`”`	Flow routing for CTA and empty-cart return path.
`headerText`, `emptyText`, `emptyButtonText`	string	Component defaults	Main copy for title, empty state, and action labels.
`serviceFeePct`	number	`0`	Percentage service fee added to subtotal before total display.
`customWidth`, `customHeight`, `isPreview`	runtime sizing	Builder/runtime dependent	Controls preview parity, viewport fit, and runtime layout behavior.

Toggles & colours

Make it yours

Most visual customisation lives in Builder style props. Keep component defaults in sync with registry defaultProps when updating branding tokens.

Prop	Default	What it controls
`backgroundColor`, `cardBackgroundColor`	Theme defaults	Outer container and cart card surfaces.
`titleColor`, `metaColor`, `priceColor`	Theme defaults	Heading, metadata, and amount text hierarchy.
`accentColor`, `accentTextColor`	Theme defaults	CTA/button background and foreground contrast.
`borderColor`, `borderRadius`	Component defaults	Card and row framing.
`fontFamily`, `titleFontSize`	Component defaults	Typography family and heading scale.

Tips

Common mistakes to avoid

Preview/build parity starts with sizing

Use runtime sizing in cart container (customWidth ?? ‘100%’ and customHeight) and keep componentDimensions.ts case ‘cart’ full-height.

Keep registry and component defaults aligned

When changing default text/colors/spacing, update both cart fallback props and registry defaultProps so builder and runtime stay consistent.

Use the right sizing variable

If you see Property ‘baseCanvasHeight’ doesn’t exist, switch to canvasHeight (or fallback) in componentDimensions.ts for cart sizing.

Regenerate deploy bundle after cart edits

After changing cart UI, registry, or dimensions, run node collectSourceFiles.js from app/ to refresh bundledSourceFiles.ts.

We’re almost ready.