This article is part of the Storefront UI Development Guide.
- Previous Task: Build an account management page
- Next Task: None
CartItems have a few inventory status fields available through GraphQL:
isBackordered. You may want to use these to display badges on the product listing page, the product details page, and the cart list. If you are using certain UI components from the Reaction Design System, they may show a badge automatically if you are including the status fields in your query.
We recommend the following logic for badge display if you write such logic yourself:
isBackordered, show "backordered" badge.
- Else if
isSoldOut, show "sold out" badge.
- Else if
isLowQuantity, show "low quantity" badge.
The order of checks is important because when
true, the other two fields will likely also be
true, and you would not want a product to appear sold out when backordering is enabled for it.
If possible you should use the InventoryStatus component from the Reaction Design System, which automatically handles these status checks.