# Magic box

> The values of `data-prop` inside `smootify-magic-box-cart`.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/attributes/magic-box  
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-cart`](https://www.smootify.io/docs/reference/elements/smootify-magic-box-cart).
- On text.

## Values

| Attribute and value | What it is | Notes |
|---|---|---|
| `data-prop="missingCategories"` | Missing categories | — |
| `data-prop="currentQuantity"` | Items in the box | — |
| `data-prop="minQuantity"` | Minimum | — |
| `data-prop="maxQuantity"` | Maximum | — |
| `data-prop="leftQuantity"` | Items left | — |
| `data-prop="leftQuantityPercentage"` | Left, as a percentage | — |
| `data-prop="discount-percentage"` | Discount percentage | also read as discountPercentage |
| `data-prop="discount-amount"` | Discount amount | — |
| `data-prop="leftQuantityWidth"` | Left, as a bar width | on container |
| `separator=", "` | List separator | Used as written, spaces included: a comma and a space joins with a comma and a space; on any; with [data-prop=“missingCategories”] |