smootify-cart
Renders the cart and opens or closes it as a mini cart.
Where it can go
- Anywhere on the page.
- Out of place, it stays in the page and does nothing: no context required.
What it requires
Nothing beyond Smootify: it works on every plan.
Fields in the form
Each field’s name attribute tells Smootify what the field holds.
| Name | Field | What it does |
|---|---|---|
note | textarea, input | The order note, saved before checkout and prefilled; a field whose name is Note becomes note (1.x read only a textarea). |
coupon | input type="text" | A discount code, applied by button[data-action="coupon"] or Enter, cleared after; a field whose name is Coupon becomes coupon. |
gift-card (or Gift Card) | input type="text" | A gift card code, applied by button[data-action="gift-card"] (Enter only with gift-card). |
email | input type="email" | With a quote (draft-order): the email of the draft order (the logged-in customer otherwise); without a quote a cart attribute. |
quantity | input type="number" | Inside a cart line: that line’s quantity. |
draft-order (submit button) | button | Sends the cart as a quote (draft order) instead of the checkout. |
| any other name | any field | A cart attribute named as the field’s data-name, saved before checkout; refilled for text, textarea, select, radio and checkbox; a multiple select is joined with ,. |
Attributes on the element
- It reads
data-open,data-draft,data-free-gift.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Cart | cart | 11 |
| Discount | discount | 2 |
| Gift card | gift-card | 3 |
| Cart form and buttons | data-name | 13 |
| Loading | skeleton | 5 |
| Cart (condition) | cart-condition | 2 |
State classes
Smootify toggles loaded, is-rendered, is-empty-cart, has-taxes, has-empty-quote on it: style them in the site’s CSS for each state. See State classes.
Loading
Defined at boot on every page.