SA tiles & bathroom retailer · Tiles, bathroom & flooring retailRebuilding 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.
- Zone selection, adding areas and the summary were confusing enough that designers supplied six state frames.
- The box-count logic, including ten percent wastage, had to stay exactly as the store calculated it.
- Returning from the cart restored stale form values through browser form restoration.
A clearer calculator with a floor and wall toggle, per-area cards and a summary sheet will increase calculator completion and add-to-cart of the computed box count.
- v1: decorate the native modal, suppress its pseudo-element UI, filter zones with data attributes and CSS so native totals still include hidden cards, and reuse the native total-boxes element so counts update natively.
- v2: a custom injected modal that takes over the calculator button, with independent floor and wall lists, a measuring guide accordion, add-area cards and a summary bottom sheet.
- Calculation ported from a validated control clone. Add-to-cart writes quantity and area, dispatches the events the theme expects, and submits the native form.
- Mobile full-screen sheet, reset on bfcache restore, verified in Playwright on desktop and iPhone SE.
Duplicate IDs
Never getElementById. Everything is decorated through attribute selectors that match both copies.
Losing to the theme's !important
Leftover gap and padding could not be overridden in CSS, so the decorate function neutralises them inline with setProperty and the important flag.
Measured on calculator completion, atc from calculator. 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 · A thumb-reach bottom nav with search that survives the keyboard
Home, categories, search, brands and bag were buried in the top header on mobile. The variant pins them to a bottom bar, reusing the native search so suggestions and tracking stay intact.
The hard part. Pinning the search panel with a transform made it the containing block for its fixed children. When the keyboard opened, the suggestions sheet flew off the screen.
SA daily-deals marketplace · Making the saving explicit, with numbers that match the backend
Strikethrough retail price and a 'you save' line on the product page, plus savings lines and badges on listing cards. The interesting part was getting a percentage that agreed with the store's own badge.
The hard part. Rounding display prices gave 45 percent where the store's badge said 44. The only trustworthy source was the backend saving object, keyed by product ID.