One config-driven script that renders product recommendations inside a brand's own card design and carousel. It copies a real product card from the page, fills it with recommendation data and starts the store's own slider library on it, so the widget looks like part of the site.
Press "Run engine", then switch the host theme and run it again. Click a recommended card to see the attribution event.
Brands said our recommendation widgets didn't look like their site.
The first version built its own HTML strings and ran its own slider and CSS. Every brand wanted its own card: different image ratios, badges, price layouts, fonts. Matching each one by hand meant writing CSS per brand and fixing it again whenever the brand redesigned.
I designed and wrote the engine as the only author: widget architecture, runtime and integration, plus the documentation site with a config-only setup guide. The recommendation strategies (top sellers, similar, bought together, personalised and others) are computed by the backend; I consume them.
destroy()Violet tint: parts I wrote.
A live slider card carries carousel classes, inline transforms, ids and listeners. The engine deep-clones a reference card, strips that state, fills it, and mounts it in its own root. The host's sliders are never touched, and destroy() removes everything it added.
Slick, Owl and Swiper each want different markup and options. An adapter layer builds the right structure and options for whichever library the store already loads, so no extra slider is shipped.
A matrix keyed by page type (home, category, product, cart) and visitor (known after five product views, or guest) picks a strategy and its fallbacks. Cart pages merge several strategies without duplicates. Category pages read the breadcrumb and retry with the parent category when a level is empty.
Clicks carry recommendation parameters, and conversions are reported through a hook. A later fix set campaign attribution as soon as the widget loads, not only on click, so the campaign source is kept for seven days.
Work runs in idle time, re-renders after DOM changes are debounced, the number of cards rendered before the carousel starts is capped, and a skeleton keeps layout shift at zero on category pages.
A new brand is one config file: placement selectors, reference slider and card, custom labels for badges and images, carousel options, custom CSS. A docs site with search explains every key, so setup does not need me.
Open to full-stack and applied AI roles, remote or hybrid.
Tell me about the role, the team and the problem.