smootify-cart
Renders the cart and opens or closes it as a mini cart.
At a glance
A cart page
- Built with
- Nothing: the Form Block sits right inside
smootify-cart. - Opens with
- Always shown, on a page of its own.
- Good to know
- Open and close buttons do nothing here.
Webflow Dropdown
- Built with
- A Dropdown, with the Form Block in its list.
- Opens with
- The Dropdown toggle.
- Good to know
- Opens again when the lines change.
Dialog
- Built with
- A Custom element with the tag
dialog. Its first child is the panel. - Opens with
- An open-cart button.
- Good to know
- A click on the backdrop and Escape close it.
Details
- Built with
- A Custom element with the tag
details, with asummary. - Opens with
- The
summary. - Good to know
- A click outside closes it.
Popover
- Built with
- Webflow's Popover element, or a Div block with the attribute
popover. - Opens with
- Its trigger, or an open-cart button.
- Good to know
- Stays open while the visitor types.
Your own interaction
- Built with
- Two elements with
data-trigger="open"anddata-trigger="close". - Opens with
- Your Webflow interaction.
- Good to know
- Smootify clicks them to open and close the cart.
Form
The lines, the totals and the checkout button. Hidden while the cart is empty.
Success Message
The empty cart, shown when there are no lines. Never used as a success message.
Error Message
Shopify's errors, written in its text and shown for 5 seconds. Screen readers read them out.
More in the guide.
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 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 |
|---|---|---|
note | Text area, input | The order note, saved before checkout and prefilled; a field whose name is Note becomes note (1.x read only a textarea). |
coupon | Text field | 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) | Text field | A gift card code, applied by button[data-action="gift-card"] (Enter only with gift-card). |
email | Text field, 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 | number field | 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.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Cart | cart | 10 |
| Discount | discount | 2 |
| Gift card | gift-card | 2 |
| 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 Webflow for each state. See State classes.
Loading
Defined at boot on every page.