Bridging Shopify’s cart/checkout logic to show trustworthy, combined discounts in the cart UI.
Shopify applies automatic discounts at checkout and allows us to handle manual codes at the cart layer. The two don’t natively combine in the cart, and the line item UI does not natively update to reflect the discount, leading to confusing subtotals and lost trust. I built a modular cart-layer system that detects both, allocates discounts proportionally, renders clear per-line price changes, and derives a truthful subtotal so the cart matches checkout expectations.
discount_code cookie; applies same UI updates.Ensuring proportional discount allocation across mixed cart items (percentage vs. fixed amounts) while maintaining subtotal accuracy required custom mathematical distribution algorithms that consistently matched Shopify's backend calculations. Some markets required different currency formatting while maintaining unified discount logic.
Getting the cart line item UI to accurately reflect combination situations - for example, a URL-based discount is applied by Shopify at checkout level, then manually entered codes are cart level (so essentially ignored by Shopify's frontend). Getting the line item discounting to accurately calculate the correct full discount, update the subtotal - which natively ONLY shows the Shopify-applied disocounting (so the checkout-level, not checkout+cart level) and having everything reliably accurate into the checkout.
Comprehensive debugging was essential given the system's complexity across multiple platforms and discount combinations. Each module includes extensive debug logging that can be enabled via browser console commands (window.CartCallbacks.debug(true)), providing real-time visibility into state changes, allocation calculations, and UI updates. This proved invaluable for troubleshooting edge cases and performance optimization across different international deployments.
callbacks/ – DOM mutations for price/badge/subtotal.handlers/ – free gifts, 3-for-2, code presence, auto-discount signals.utils/ – logging, cookies, debouncing, selectors, currency.eventManager → discountCoordinator – orchestrate updates deterministically.The upcoming DiscountCoordinator will replace the current event manager's broadcast approach with intelligent orchestration. Instead of multiple handlers reacting simultaneously to cart events, the Coordinator will analyze discount state first, then decide which handlers should run, in what order, and with what data. This prevents conflicts and race conditions while enabling more sophisticated discount combinations and cleaner debugging workflows.
Sometimes the best engineering solution works around platform constraints rather than fighting them - building coordination layers often delivers better results than trying to force different systems to communicate natively.