CartList

Use CartList to display a list of product items in the cart. Pass CartItem elements as children; the list wraps each one and announces changes for assistive technology.

Import

import { CartList } from '@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
children	ComponentChildren	No	The CartItem elements to display in the list.

CartList also accepts standard <div> HTML attributes (for example, className).

Example

Render a cart list with two items. Build the CartItem children with h.

import { CartList, CartItem, provider } from '@dropins/tools/components.js';
import { h } from '@dropins/tools/preact.js';

await provider.render(CartList, {
  children: [
    h(CartItem, { key: '1', title: h('div', {}, 'Product one'), quantity: 1 }),
    h(CartItem, { key: '2', title: h('div', {}, 'Product two'), quantity: 2 }),
  ],
})(document.querySelector('.cart-list'));

Related

• CartItem — the item elements you pass as children.
• Price — format the prices shown in each item.