{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/themes/sidebars.yaml"},"props":{"codeGuideFiles":[],"dynamicMarkdocComponents":[],"metadata":{"type":"markdown"},"seo":{"title":"Cart Feedback (Toasts & Button Loading)","description":"Fluid is the open e-commerce platform built for direct-sales."},"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"cart-feedback-toasts--button-loading"},"children":["Cart Feedback (Toasts & Button Loading)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a shopper adds, updates, or removes a cart item on your theme, the FairShare SDK can surface the result for you — a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["toast"]}," confirms success or reports a failure, and add-to-cart ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["buttons"]}," show a spinner while the request is in flight. ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Both are opt-in (off by default)."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This page is for theme authors: how to enable, style, and localize them from your theme."]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is the theme-facing guide. For the full event payloads and JavaScript API, see the SDK reference: ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/sdk/fairshare/cart/cart-operation-events"},"children":["Cart Operation Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"the-mental-model"},"children":["The mental model"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your theme's buttons drive cart mutations — usually via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-fluid-add-to-cart"]}," (see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/product-bundles"},"children":["Product Bundles"]}," and the cart docs)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Once enabled, the SDK renders the toast and manages button spinners for you when a mutation settles — no per-element wiring."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You enable and configure it ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["from your theme's own JavaScript"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FairShareSDK.configureCartFeedback(...)"]},", and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["style"]}," it with your theme CSS."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Because the toast renders in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["light DOM"]},", your theme's CSS applies to it directly — no Shadow DOM to pierce."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"turning-it-on"},"children":["Turning it on"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The features can be toggled with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-fluid-toast=\"true\""]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-fluid-button-loading=\"true\""]}," attributes on the Fluid ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<script>"]}," tag — ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["but that script is usually a global embed injected into the page, which a theme can't edit."]}," So from a theme, enable and configure them at runtime instead:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!-- Anywhere in your theme, e.g. layout/theme.liquid -->\n<script>\n  window.addEventListener(\"DOMContentLoaded\", () => {\n    window.FairShareSDK?.configureCartFeedback({\n      toast: true,\n      buttonLoading: true,\n      position: \"bottom-right\",\n      class: \"theme-toast\",\n    });\n  });\n</script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Notes:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Call it inside ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DOMContentLoaded"]}," — the SDK embed loads asynchronously, so it may not be attached yet when your inline script first runs. The optional chaining (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["?."]},") makes it a safe no-op if so."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Pass only the fields you want. The config is read lazily (at toast-show / button-click time) and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["merges over"]}," any ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-fluid-*"]}," script-tag attributes — precedence is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configureCartFeedback()"]}," > attributes > defaults. So if you ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["do"]}," control the embed, the attributes still work as a baseline."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CART_OPERATION_SUCCESS"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CART_OPERATION_ERROR"]}," events fire regardless — to render your own UI instead, just don't set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toast: true"]}," and listen to those."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"all-config-keys"},"children":["All config keys"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Key"},"children":["Key"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toast"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Enable the built-in toast"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonLoading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Enable the auto-spinner on declarative add-to-cart / enrollment buttons"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["position"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom-center"]}," (default), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom-left"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom-right"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top-center"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top-left"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top-right"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["class"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Class added to the toast element (style variants in CSS via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-variant"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["duration"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["number"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Auto-dismiss delay in ms (default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4000"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Show the variant icon (default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["successIcon"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorIcon"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["closeIcon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom icon — emoji, text, or SVG markup"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["messages"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ add, update, remove, error }"]}," message overrides"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling-the-toast"},"children":["Styling the toast"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You don't need a class at all — the toast always has ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id=\"fluid-toast\""]}," and a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-variant"]}," attribute, so you can target it directly:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"/* assets/custom.css */\n#fluid-toast {\n  border-radius: var(--border_radius, 8px);\n  font-family: var(--font_family);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n}\n#fluid-toast[data-variant=\"success\"] {\n  background: var(--primary_color, #0f9d58);\n  color: #fff;\n}\n#fluid-toast[data-variant=\"error\"] {\n  background: #d93025;\n  color: #fff;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Prefer your own class? Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["class"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configureCartFeedback({ class: \"theme-toast\" })"]}," and style ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".theme-toast[data-variant=\"error\"]"]}," instead. Either way, style each variant off the data attributes the toast exposes:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Data attribute on the toast"},"children":["Data attribute on the toast"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Values"},"children":["Values"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Target it for"},"children":["Target it for"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["success"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Success vs. error styling"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-position"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["the configured position"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Position-specific tweaks"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-state"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["open"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["closed"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Enter/exit styling"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"translating-the-copy"},"children":["Translating the copy"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["messages"]}," to override the defaults per category. In a Liquid theme the inline script is rendered server-side, so you can pull the copy from your locale files and the toast follows the shopper's language."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Run each string through the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["json"]}," filter instead of wrapping it in quotes yourself. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["| json"]}," emits a fully escaped JavaScript string literal — its own quotes included — so a translation that contains an apostrophe, a quote, or a backslash can't break the script. Note there are ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["no"]}," surrounding ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\""]}," in the snippet below; ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["json"]}," supplies them:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script>\n  window.addEventListener(\"DOMContentLoaded\", () => {\n    window.FairShareSDK?.configureCartFeedback({\n      toast: true,\n      messages: {\n        add: {{ 'cart.added' | t | json }},\n        update: {{ 'cart.updated' | t | json }},\n        remove: {{ 'cart.removed' | t | json }},\n        error: {{ 'cart.error' | t | json }},\n      },\n    });\n  });\n</script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["| t"]}," is the Liquid translation filter and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["| json"]}," escapes the result for the JavaScript string — swap ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["| t"]}," for your theme's localization helper if it differs. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cart.*"]}," keys are an example, not built-ins: add them (and their translations) to your theme's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locales/*.json"]}," files first, and keep the namespace consistent between the snippet and the files. A key that isn't defined renders a visible \"translation missing\" string into the toast rather than falling back to the default."]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Message key"},"children":["Message key"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["add"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Added to cart"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["update"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Cart updated"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["remove"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Removed from cart"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Something went wrong. Please try again."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"loading-buttons"},"children":["Loading buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonLoading: true"]},", buttons wired with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-fluid-add-to-cart"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-fluid-add-enrollment-pack"]}," show a spinner automatically while their request runs — no per-button theme code. Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-fluid-loading-text"]}," to swap the label while loading:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<button data-fluid-add-to-cart=\"{{ product.variant_id }}\" data-fluid-loading-text=\"Adding…\">\n  {{ 'product.add_to_cart' | t }}\n</button>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The spinner inherits the button's text color, so it matches your theme without extra CSS."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If your theme runs a cart mutation from its own JavaScript (custom payloads, dynamic bundles), wrap the call so the spinner is handled for you — this works even without ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttonLoading"]}," enabled:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"button.addEventListener(\"click\", (e) => {\n  window.FairShareSDK.withButtonLoading(e.currentTarget, () =>\n    window.FairShareSDK.addCartItems(variantId, { quantity: 1 }),\n  );\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/sdk/fairshare/cart/cart-operation-events#button-loading-indicator"},"children":["Cart Operation Events → Button Loading Indicator"]}," for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setButtonLoading"]}," and the full API."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"putting-it-together"},"children":["Putting it together"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A theme that enables, styles, localizes, and gets loading add-to-cart buttons:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!-- layout/theme.liquid -->\n<button data-fluid-add-to-cart=\"{{ product.variant_id }}\" data-fluid-loading-text=\"{{ 'product.adding' | t }}\">\n  {{ 'product.add_to_cart' | t }}\n</button>\n\n<script>\n  window.addEventListener(\"DOMContentLoaded\", () => {\n    window.FairShareSDK?.configureCartFeedback({\n      toast: true,\n      buttonLoading: true,\n      position: \"bottom-right\",\n      class: \"theme-toast\",\n      messages: {\n        add: {{ 'cart.added' | t | json }},\n        error: {{ 'cart.error' | t | json }},\n      },\n    });\n  });\n</script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"/* assets/custom.css */\n.theme-toast { border-radius: var(--border_radius, 8px); }\n.theme-toast[data-variant=\"success\"] { background: var(--primary_color); color: #fff; }\n.theme-toast[data-variant=\"error\"]   { background: #d93025; color: #fff; }\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related"},"children":["Related"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/sdk/fairshare/cart/cart-operation-events"},"children":["Cart Operation Events"]}," — event payloads and JavaScript API"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/product-bundles"},"children":["Product Bundles"]}," — bundle add-to-cart buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/developer-guide"},"children":["Developer Guide"]}," — building and customizing themes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/affiliate-hydration"},"children":["Affiliate Hydration"]}," — other light-DOM SDK behaviors in themes"]}]}]},"headings":[{"value":"Cart Feedback (Toasts & Button Loading)","id":"cart-feedback-toasts--button-loading","depth":1},{"value":"The mental model","id":"the-mental-model","depth":2},{"value":"Turning it on","id":"turning-it-on","depth":2},{"value":"All config keys","id":"all-config-keys","depth":3},{"value":"Styling the toast","id":"styling-the-toast","depth":2},{"value":"Translating the copy","id":"translating-the-copy","depth":2},{"value":"Loading buttons","id":"loading-buttons","depth":2},{"value":"Putting it together","id":"putting-it-together","depth":2},{"value":"Related","id":"related","depth":2}],"frontmatter":{"seo":{"title":"Cart Feedback (Toasts & Button Loading)"}},"lastModified":"2026-07-14T17:45:46.000Z"},"slug":"/docs/themes/cart-feedback","userData":{"isAuthenticated":false,"teams":["anonymous"]}}