Magic box
The values of `data-prop` inside `smootify-magic-box-cart`.
On this page
At a glance
is-empty · is-disabled
Empty
- Shows
empty-stateinstead ofitems-list, andbox-condition="cannot-purchase".- Add button
- Disabled.
is-disabled
Filling: 4 of 6
- Shows
items-listandbox-condition="cannot-purchase".- Add button
- Disabled.
is-purchasable
Ready: 6 of 6
- Shows
box-condition="can-purchase".- Add button
- Enabled.
is-purchasable · is-saving
Ready, with a 10% discount
- Discount
- From the Magic Box entry.
is-savingwhile it applies. - Price
data-prop="price"after the discount,data-prop="compareAtPrice"before it.
More in the guide.
Where it can go
- Inside
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”] |