# Commerce components

> The commerce pack's 6 components: shopping: products, pricing plans, carts, ratings, comparisons and prices.

Add it with `packs: ["commerce"]`, or leave `packs` out for every pack.

## Product

One product with its price; a short description between the tags, then a Button with ask for each thing the reader can do with it (Add to cart, Tell me more); rating is out of 5, count how many rated it. When the reader is choosing what to buy, show each option as one, side by side in Columns.

Between its tags: inline text: its label. It also takes `Button`s, drawn under it as what the reader can do.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `name` | text | yes |  |
| `price` | text |  |  |
| `was` | text |  |  |
| `image` | address |  |  |
| `rating` | number |  |  |
| `count` | number |  |  |
| `badge` | text |  |  |
| `href` | address |  |  |

```markdown
<Columns>
<Product name="Studio Headphones" price="$249" was="$299" rating="4.5" badge="Sale">Closed-back, 30 hours of battery, folds flat.</Product>
<Product name="Travel Earbuds" price="$129" rating="4.1">Small case, noise cancelling, 8 hours a charge.</Product>
</Columns>
```
## Plan

A pricing plan, its features as a Markdown list inside.

Between its tags: a Markdown list.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `name` | text | yes |  |
| `price` | text | yes |  |
| `period` | text |  |  |
| `note` | text |  |  |
| `featured` | true or false |  |  |

```markdown
<Columns>
<Plan name="Starter" price="$0" period="/month">
- 3 projects
- Community support
</Plan>
<Plan name="Team" price="$29" period="/month" featured="true" note="Most popular">
- Unlimited projects
- SSO
- Priority support
</Plan>
<Plan name="Enterprise" price="Custom">
- Audit logs
- 99.99% SLA
- A named contact
</Plan>
</Columns>
```
## Cart

Items and totals, from the Markdown table inside: the item, the quantity, the price.

Between its tags: a Markdown table (first column labels, the others series).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |
| `total` | text |  |  |
| `note` | text |  |  |

```markdown
<Cart title="Your cart" total="$412.00" note="Free shipping over $50">
| Item | Qty | Price |
|---|---|---|
| Studio Headphones | 1 | $249.00 |
| USB-C cable | 2 | $24.00 |
| Hard case | 1 | $139.00 |
</Cart>
```
## Rating

A real star rating out of max, never a made-up one.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `value` | number | yes |  |
| `max` | number |  |  |
| `count` | text |  |  |

```markdown
The Studio Headphones are rated <Rating value="4.6" count="1,203 reviews" /> by buyers, the earbuds <Rating value="3.9" count="88 reviews" />.
```
## Compare

Options side by side, from the Markdown table inside: the feature, then one column per option; yes and no become marks.

Between its tags: a Markdown table (first column labels, the others series).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<Compare title="Phones">
| Feature | Pixel 10 | iPhone 17 | Galaxy S26 |
|---|---|---|---|
| Screen | 6.3" | 6.1" | 6.2" |
| Battery | 4,700 mAh | 3,600 mAh | 4,000 mAh |
| 5G | yes | yes | yes |
| Headphone jack | no | no | no |
| Price | $799 | $829 | $799 |
</Compare>
```
## Price

A price, with the old one struck through.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `value` | text | yes |  |
| `was` | text |  |  |
| `period` | text |  |  |
| `note` | text |  |  |

```markdown
<Price value="$49" was="$79" period="/month" note="First year, then $79" />
```