Free delivery counter for Khoroshop (Vanilla JS)
Business task:
Development of a tool to increase the average order value (Upsell) in the online store. The user should visually understand how much more they need to add to their cart to qualify for free shipping.
Technical challenges:
The store operates on a closed platform (Khoroshop) without access to backend logic and template source files. The cart updates dynamically via AJAX, and the layout significantly differs on PCs (tables) and smartphones (flex blocks).
Implemented solution (Stack: Vanilla JS, CSS3, DOM API):
1. A lightweight, independent script was written in pure JavaScript (Zero dependencies), which easily integrates through the admin panel.
2. Price change tracking was implemented using MutationObserver for maximum performance and battery saving on mobile devices.
3. A system of "smart wrappers" was developed: the script automatically analyzes the DOM tree and adjusts its structure (or , or ) to avoid breaking the platform's native flex and grid containers.
4. Responsive layout (Pixel-perfect) was created that perfectly fits into the store's UI kit.
5. Custom confetti animation was added on Canvas for positive emotional reinforcement for the buyer upon reaching the goal.
Result:
A seamlessly integrated cross-platform widget that works without conflicts with the Khoroshop core and motivates buyers to increase their order amount.
#javascript #frontend #khoroshop #upsell #ecommerce #webdev #vanillajs #domapi #frontenddeveloper
Development of a tool to increase the average order value (Upsell) in the online store. The user should visually understand how much more they need to add to their cart to qualify for free shipping.
Technical challenges:
The store operates on a closed platform (Khoroshop) without access to backend logic and template source files. The cart updates dynamically via AJAX, and the layout significantly differs on PCs (tables) and smartphones (flex blocks).
Implemented solution (Stack: Vanilla JS, CSS3, DOM API):
1. A lightweight, independent script was written in pure JavaScript (Zero dependencies), which easily integrates through the admin panel.
2. Price change tracking was implemented using MutationObserver for maximum performance and battery saving on mobile devices.
3. A system of "smart wrappers" was developed: the script automatically analyzes the DOM tree and adjusts its structure (or , or ) to avoid breaking the platform's native flex and grid containers.
4. Responsive layout (Pixel-perfect) was created that perfectly fits into the store's UI kit.
5. Custom confetti animation was added on Canvas for positive emotional reinforcement for the buyer upon reaching the goal.
Result:
A seamlessly integrated cross-platform widget that works without conflicts with the Khoroshop core and motivates buyers to increase their order amount.
#javascript #frontend #khoroshop #upsell #ecommerce #webdev #vanillajs #domapi #frontenddeveloper
Odessa 
Available for hire
Offer work