Skip to main content

useCartLine

The useCartLine hook provides access to the cart line object. It must be a descendent of a CartProvider component.

Example code​

import {
  CartLinePrice,
  CartLineProvider,
  useCartLine,
  useCart,
} from '@shopify/hydrogen';

export function MyComponent() {
  const {lines} = useCart();

  return lines.map((line) => {
    return (
      <CartLineProvider>
        <CartLineItem />
      </CartLineProvider>
    );
  });
}

export function CartLineItem() {
  const {
    quantity,
    merchandise: {
      product: { title },
    },
  } = useCartLine();

  return (
    <>
      <h2>{title}</h2>
      <span>{quantity}</span>
      <CartLinePrice as="span" />
    </>
  );
}

Return value​

The useCartLine hook returns an object with the following keys:

NameDescription
idThe cart line's ID.
quantityThe cart line's quantity.
attributesThe cart line's attributes.
merchandiseThe cart line's associated merchandise.