# smootify-cart

> Renders the cart and opens or closes it as a mini cart.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/astro/reference/elements/smootify-cart  
Updated: 2026-10-21

## Where it can go

- **Anywhere** on the page.
- **Out of place,** it stays in the page and does nothing: no context required.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Fields in the form

Each field’s `name` attribute tells Smootify what the field holds.

| Name | Field | What it does |
|---|---|---|
| `note` | `textarea`, input | The order note, saved before checkout and prefilled; a field whose name is `Note` becomes `note` (1.x read only a textarea). |
| `coupon` | `input type="text"` | A discount code, applied by `button[data-action="coupon"]` or Enter, cleared after; a field whose name is `Coupon` becomes `coupon`. |
| `gift-card` (or `Gift Card`) | `input type="text"` | A gift card code, applied by `button[data-action="gift-card"]` (Enter only with `gift-card`). |
| `email` | `input type="email"` | With a quote (`draft-order`): the email of the draft order (the logged-in customer otherwise); without a quote a cart attribute. |
| `quantity` | `input type="number"` | Inside a cart line: that line’s quantity. |
| `draft-order` (submit button) | button | Sends the cart as a quote (draft order) instead of the checkout. |
| any other name | any field | A cart attribute named as the field’s `data-name`, saved before checkout; refilled for text, textarea, select, radio and checkbox; a multiple select is joined with `,`. |

## Attributes on the element

- **It reads** `data-open`, `data-draft`, `data-free-gift`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Cart](https://www.smootify.io/docs/astro/reference/attributes/cart) | `cart` | 11 |
| [Discount](https://www.smootify.io/docs/astro/reference/attributes/discount) | `discount` | 2 |
| [Gift card](https://www.smootify.io/docs/astro/reference/attributes/gift-card) | `gift-card` | 3 |
| [Cart form and buttons](https://www.smootify.io/docs/astro/reference/attributes/cart-form) | `data-name` | 13 |
| [Loading](https://www.smootify.io/docs/astro/reference/attributes/loading) | `skeleton` | 5 |
| [Cart (condition)](https://www.smootify.io/docs/astro/reference/conditions/cart) | `cart-condition` | 2 |

## State classes

Smootify toggles `loaded`, `is-rendered`, `is-empty-cart`, `has-taxes`, `has-empty-quote` on it: style them in the site’s CSS for each state. See [State classes](https://www.smootify.io/docs/astro/reference/state-classes).

## Loading

Defined at boot on every page.