Global outdoor-gear brand · Outdoor & mobile-living gearA confirmation popup that only fires on a real add
After adding to bag there was no clear confirmation or next step. The variant shows a card on desktop and a bottom sheet on mobile, but only once the cart API has actually said yes.
- Add-to-bag gave shoppers no obvious prompt to view the bag or continue.
- The buy box has a form submit button that shows a loading state during roughly two seconds of hydration, plus a sticky call to action with its own markup.
- Related-product tiles carry their own add-to-cart buttons, so a broad selector would fire for the wrong product.
A confirmation shown only after a successful add will increase bag views and checkout progression, without ever appearing on a failed add.
- Desktop: fixed top-right card with fade and slide. Mobile: bottom sheet.
- A two-step gate: an add click arms a ten-second window, and the popup renders only on a confirmed successful response from the cart API.
- Fetch and XHR patched once, guarded, to observe the cart call, with zero overhead outside the armed window.
- Price parsed from the combined sale and original price text with a currency-aware pattern.
Listening before React
A bubble-phase listener on the document was cut off by React's stopPropagation. A capture-phase listener fires first and sees every click.
Two buttons, one product
Detection scoped to the buy box, matching structure and accessible labels exactly, so related-product buttons never trigger the popup.
Measured on bag views, checkout starts, conversion rate. Test results belong to the client and are shared in conversation, with their permission, rather than published here.
More experiments
View all →SA beauty retailer · Bag context and a direct checkout after add-to-bag
The native 'item added' modal showed the item and nothing else. The variant adds the bag total, item count and a Checkout now button, driven by the site's own analytics event and cart feed.
The hard part. The extra cart fetch doubled a server-sensitive call. The popup had to fail safe, and a lighter fallback had to be scoped for the client.
SA tiles & bathroom retailer · Rebuilding a tile calculator without breaking its maths
The native tile calculator was hard to use. Version one decorated the native modal; version two replaced it with a custom floor and wall calculator, ported from a validated clone of the original logic and hardened through a 29-bug QA thread.
The hard part. The calculator markup exists twice on the page with duplicate IDs, and the theme's ID-based styles with !important beat any attribute selector the variant could write.