WordPress Developer · WooCommerce Developer · Web Developer · Cape Town, South Africa
Skills in this project: JavaScript · XHR interception · Fetch interception · FormData handling · PHP · WordPress AJAX · WordPress hooks · Shortcodes · CSS animations · Chrome DevTools · WooCommerce · YITH · DOM manipulation · Micro-interactions · Web Developer · Frontend Developer
The Problem
The site had a header quote icon but the item count only updated on full page reload. In a procurement browsing flow this breaks the user experience — customers need instant confirmation that their click worked and items were added to their quote list. Solving this required understanding how YITH sends its AJAX requests and intercepting them reliably without polling.
What I Built
- WordPress shortcode [quote_badge] rendering the quote icon, live count badge, and a direct link to the quote list page
- Optional auto-injection into the primary navigation menu using the wp_nav_menu_items filter
- Lightweight AJAX endpoint returning a JSON count — decoupled from page HTML so caching does not affect accuracy
- XHR and fetch interceptor that detects YITH add-to-quote actions even when the payload is sent as FormData
- Badge update logic that only fires on confirmed YITH quote mutations — no polling, no performance cost
- Pulse CSS animation triggered when the badge number changes, giving users immediate visual confirmation
Real Problems Solved
These are real issues that surfaced under real users and real hosting constraints.
- YITH’s AJAX payload was FormData rather than a URL-encoded query string — standard string-matching failed silently. Rebuilt the listener to correctly parse FormData-encoded action values.
- The PHP counter method get_raq_items was not returning the correct count. Updated to get_raq_item_number which matches YITH’s internal counter.
- Used Chrome DevTools console to force-set the badge value and confirm which DOM element was being targeted — preventing wasted debugging time on theme-injected duplicate elements.
Skills Demonstrated
- JavaScript
- XHR interception
- Fetch interception
- FormData handling
- PHP
- WordPress AJAX
- WordPress hooks
- Shortcodes
- CSS animations
- Chrome DevTools
- WooCommerce
- YITH
- DOM manipulation
- Micro-interactions
- Web Developer
- Frontend Developer
Looking to hire a WordPress Developer or WooCommerce Developer based in Cape Town? Get in touch or download my CV.