An E-Com Toast confirms a shopping action without leaving the page: a product added to the cart, or saved to the wishlist. It has no status color; it speaks in the store’s own black and white.
How to show an E-Com Toast from script and the CSS behind it. The files are eco-design-system/notifications.css and notifications.js.
Link the shared files once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/eco-design-system/notifications.css"> and <script src="/eco-design-system/notifications.js"></script>. Link button.css first. |
| 2. Show a toast | Call ECO_N.showEcomToast({ variant, name, text }). |
| 3. Variant | cart (image and two buttons) or info (black, optional link). |
| 4. Actions | primary and secondary for the cart, link for the informational toast, each { label, onClick }. |
The markup has no motion. The slide is set in Motion on Examples & Guidelines.
| Setting | Use |
|---|---|
variant | cart (default) or info. |
name, text | The product name (bold) and the text after it. |
img | Add to cart: the product image URL. |
primary, secondary | Add to cart: buttons, each { label, onClick }. |
link | Informational: { label, onClick }. |
autoHide | Milliseconds; default 4000, 0 = stays until dismissed. |
--toast-in-ease, --toast-in-duration, --toast-out-ease, --toast-out-duration.button.css is on the page.The component is one CSS file and one script, shared by every notification. Link them, never copy them. The code below is read from the files the page links, so it is always what you see.