Commerce & Orders
Menu Item Detail
A full-screen item detail view for restaurant ordering. It displays the item image, description, configurable option groups, nutrition info, and allergens, and lets customers choose a quantity and add the item directly to the cart.
The detail and option-selection step before adding to cart.
Reads all item data passed by Menu Item Card.
AppPlayer-injected callback updates the shared cart state.
Four things worth knowing
Configurable option groups
Renders option groups - such as size, extras, or cooking preference - from the item data passed in navigation params. Default selections are applied automatically.
Nutrition and allergen info
Displays calories, macros, and allergen tags when present in the item payload, helping customers make informed choices.
Quantity selector
Inline plus and minus controls let customers set how many of the item they want before adding to the cart.
Add-to-cart and navigation
Calls the AppPlayer-injected onAddToCart with the item plus selected options and quantity, then optionally navigates to the cart, menu, or orders screen.
Add it as your shared item detail screen
Where to find itAdd it to your shared detail screen
- Component picker → Commerce & Orders → Menu Item Detail.
- Drop it onto a dedicated item detail screen.
- Point all Menu Item Card taps to this one
detailScreenId.
Before you publishThree things to check
- Set
cartScreenIdso “View Cart” in the confirmation sheet has a valid destination. - Optionally set
menuScreenIdso “Continue Shopping” returns to your menu screen. - Confirm item payload fields from Menu Item Card include
optionGroups, allergens, and nutrition if those sections are enabled.
Data, navigation, and display
| Prop | Type | Default | Description |
|---|---|---|---|
navigationParams | object | Injected by AppPlayer | Primary data source for title, subtitle, price, image, tags, option groups, includes, allergens, nutrition, spice level, serving size, and menu item ID. |
showImage, showPrice, showDescription, showBadge, showTags | boolean | true | Visibility toggles for the hero/content header elements. |
showIncludes, showAllergens, showNutrition, showSpiceLevel, showServingSize | boolean | true | Visibility toggles for supporting food information sections. |
showBackButton, showOrderButton, showQuantitySelector | boolean | true | Visibility toggles for navigation controls and primary action controls. |
cartScreenId, menuScreenId, ordersScreenId | string | ” | Destinations used by confirmation sheet actions and follow-up order flow navigation. |
orderButtonLabel, usesBackendOrders | string / boolean | Add to cart / false | Primary CTA label and backend-order mode toggle. |
onAddToCart, onSubmitOrder, onScreenNavigate, onGoBack | function | Injected by AppPlayer | Runtime callbacks for cart updates, backend order submit, and screen navigation actions. |
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 | Screen and card surface colors. |
titleColor, priceColor, descriptionColor, sectionTitleColor, dividerColor | Theme defaults | Main text hierarchy and section separators. |
accentColor, backButtonColor, orderButtonColor, orderButtonTextColor | Theme defaults | Primary action and interactive accent colors. |
badgeBackgroundColor, badgeTextColor | Theme defaults | Badge chip background and label color. |
tagBackgroundColor, tagTextColor | Theme defaults | Tag pill background and label color. |
allergenBackgroundColor, allergenTextColor | Theme defaults | Allergen pill background and text color. |
nutritionBackgroundColor, nutritionValueColor, nutritionLabelColor | Theme defaults | Nutrition card surface and typography colors. |
cartConfirmBackgroundColor, cartConfirmIconColor, cartConfirmTitleColor, cartConfirmTextColor | Theme defaults | “Added to cart” confirmation sheet container and text colors. |
cartChipBackgroundColor, cartChipTextColor, cartStatusTextColor | Theme defaults | Cart count/status chip colors in the confirmation sheet. |
continueButtonColor, continueButtonTextColor, viewCartButtonColor, viewCartButtonTextColor | Theme defaults | Confirmation sheet button colors. |
titleFontSize, padding, fontFamily | 26, 20, component default | Core typography scale and layout spacing controls. |
Common mistakes to avoid
Param shape must match the item card
All field names in the navigation payload - item id, name, price, options, etc. - must match exactly what Menu Item Card sends. Changing one side without the other breaks the detail view.
Default option selections keep the flow smooth
Configure sensible defaults for required option groups so customers can tap Add to Cart immediately without having to make a selection first.
One shared screen covers every item
Because all content comes from navigation params you never need a separate detail screen per item. Point every Menu Item Card tap at the same screen.
Builder canvas uses placeholder data
On the canvas the component renders sample item content so you can preview layout and styles without navigating through the full flow.