thegeneralyst/AnopaDocs
Cart

Cart Items Display

Renders the full list of cart line items with configurable layout, pricing, and interactions.

What it does

AP_CartItemsDisplay renders the full list of cart line items. Each item includes a product image, title, variant options, price (including compare-at pricing), a quantity selector, and a remove button. Every element's position is configurable, and prices automatically re-fetch in the correct currency when the active market changes.

How to set it up

Place this component inside your cart drawer or cart page. It does not require any slot connections — all rendering is handled internally, with full styling exposed through property controls. On the canvas it shows two dummy items so you can design around realistic content, while at runtime it connects to the actual cart.

Key behaviours

  • Three price position options: Top Right, Below Title, or Inline with Title
  • Three quantity position options: Below Variant, Bottom Row, or Top Right
  • Three remove button positions: Bottom Right, Top Right, or Inline with Quantity
  • Market-aware: re-fetches variant prices when activeMarket changes and fades to 65% opacity during the re-fetch
  • Optional navigation: clicking a cart item can navigate to its product page
  • On canvas: always shows two dummy items for layout and styling
  • At runtime: renders nothing when the cart is empty
  • Free plan users see an Upgrade Anopa banner below the item list

Property Controls

ControlTypeDefaultDescription
Navigation — Enable ClickBooleanfalseWhen enabled, clicking a cart item navigates to its product page.
Navigation — URL BaseString/products/URL prefix used before the product handle when navigating from a cart item.
Navigation — Close DrawerBooleantrueWhen enabled, closes the cart drawer after navigating to a product page.
Positions — PriceEnumTop RightControls where the price appears: Top Right, Below Title, or Inline with Title.
Positions — QuantityEnumBelow VariantControls where the quantity selector appears: Below Variant, Bottom Row, or Top Right.
Positions — RemoveEnumBottom RightControls where the remove button appears: Bottom Right, Top Right, or Inline with Qty.
Image — WidthNumber88pxWidth of the product image displayed for each cart item.
Image — AspectEnum3:4Aspect ratio of the product image: 1:1, 3:4, 4:5, 2:3, or 16:9.
Image — RadiusNumber8pxCorner radius applied to the product image.
Price — FontFont14pxTypography settings for the price text.
Price — ColorColor#111111Text color used for the price.
Price — DecimalsNumber2Number of decimal places to display for prices.
Compare At — ShowBooleantrueWhen enabled, shows the original compare-at price alongside the current price.
Compare At — StrikethroughBooleantrueWhen enabled, draws a strikethrough line through the compare-at price.
Quantity Container — BackgroundColor#f2f2f2Background color of the quantity selector container.
Quantity Buttons — SizeNumber24pxSize of the + and − buttons in the quantity selector.
Remove — SizeNumber24pxSize of the remove button icon.
Remove — OpacityNumber0.4Opacity applied to the remove button icon.