smootify-magic-box-cart
Box panel: picked items, counters, totals and the form that adds the whole box to the cart.
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. - Must contain
form,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 | data-prop | 10 |
| Magic box (condition) | box-condition | 2 |