Skip to main content

CartSummaryItems

Description​

Displays cart items in a compact summary format, ideal for checkout or order review pages. Shows product thumbnails with quantity badges, variant options, and line totals. Includes loading skeleton and empty state.

Import​

import { CartSummaryItemsList } from '@components/frontStore/cart/CartSummaryItems';

Usage​

import { CartSummaryItemsList } from '@components/frontStore/cart/CartSummaryItems';
import { useCartState } from '@components/frontStore/cart/CartContext';

function OrderSummary() {
  const { data: cart, loading } = useCartState();
  const items = cart?.items || [];

  return (
    <CartSummaryItemsList
      items={items}
      loading={loading}
      showPriceIncludingTax={true}
    />
  );
}

Props​

NameTypeRequiredDescription
itemsCartItem[]YesArray of cart items to display
loadingbooleanYesShows skeleton loader when true
showPriceIncludingTaxbooleanNoDisplay prices with tax included

Examples​

Basic Summary​

import { CartSummaryItemsList } from '@components/frontStore/cart/CartSummaryItems';
import { useCartState } from '@components/frontStore/cart/CartContext';

function CheckoutSummary() {
  const { data: cart, loading } = useCartState();

  return (
    <div>
      <h2>Order Summary</h2>
      <CartSummaryItemsList
        items={cart?.items || []}
        loading={loading}
      />
    </div>
  );
}