# Magic box

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

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

## Where it can go

- **Inside** [`smootify-magic-box-cart`](https://www.smootify.io/docs/astro/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”] |