# smootify-magic-box-cart

> Box panel: picked items, counters, totals and the form that adds the whole box to the cart.

Status: Ready (Smootify 2.0)  
Add-on: Magic Box  
URL: https://www.smootify.io/docs/reference/elements/smootify-magic-box-cart  
Updated: 2026-10-13

## At a glance

| State | Classes on `smootify-magic-box-cart` | What shows |
|---|---|---|
| Empty | `is-empty`, `is-disabled` | `empty-state` instead of `items-list`, `box-condition="cannot-purchase"`; the add button is disabled |
| Filling, 4 of 6 | `is-disabled` | `items-list`, `box-condition="cannot-purchase"`; the add button is disabled |
| Ready, 6 of 6 | `is-purchasable` | `box-condition="can-purchase"`; the add button is enabled; `data-prop="price"` $120.00 |
| Ready, with a 10% discount from a Magic Box entry | `is-purchasable`, `is-saving` | `data-prop="price"` $108.00 after the discount, `data-prop="compareAtPrice"` $120.00 before it, `data-prop="discount-amount"` $12.00 |

More in [the guide](https://www.smootify.io/docs/features/magic-box).

## Where it can go

- **Inside** [`smootify-magic-box`](https://www.smootify.io/docs/reference/elements/smootify-magic-box).
- **Must contain** `form`, [`box-item`](https://www.smootify.io/docs/reference/elements/box-item).
- **Out of place,** Smootify removes it from the page.

## What it requires

- The **Magic Box** extension (the extension activated in the Smootify dashboard, on every plan). Without it, the element does nothing.

## Fields in the form

Each field’s **Name** setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

| Name | Field | What it does |
|---|---|---|
| `buy-now` (submit button) | button | The box goes straight to checkout (also `data-buy-now`). |
| any name | any field | A property of the box’s first line, named as the field’s `data-name`; empty values are not sent. |

## Attributes on the element

- **It reads** `data-buy-now`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Magic box](https://www.smootify.io/docs/reference/attributes/magic-box) | `data-prop` | 10 |
| [Magic box (condition)](https://www.smootify.io/docs/reference/conditions/magic-box) | `box-condition` | 2 |