Free Shipping Bar for Mobile Cart — integration for Khoroshop

## Task:

Implement an adaptive free shipping indicator on the Horoshop platform for the mobile version of the cart.
The key condition is full compatibility with the internal logic of the site (mmenu, overlays, dynamic content loading) without interfering with the core.

## Main Goals

= Add the bar only when there are products in the cart
= Automatically update the amount "remaining for free shipping" when the order changes
= Completely hide the bar when the cart is empty
= Display the festive message "Free shipping available!"
= Hide the line "Remaining 0 UAH" when the limit is reached
= Ensure correct operation on all mobile devices without visual glitches

## Technical Implementation

Language:
pure JavaScript (Vanilla) without third-party libraries
Observers:
MutationObserver was used to track changes in the DOM (.j-cart-product, .j-total-sum)
Conditional Logic:
- the bar is not inserted into an empty cart;
- automatically added when the first product appears;
- removed when the last one is deleted;
- smooth width update of the indicator through transition.

## Styling:

embedded with dynamic connection for full autonomy.
Compatibility:
tested in Safari, Chrome, Firefox on iOS / Android
UX Logic:
no forced closing of the cart or interference with mm-opening / overflow:hidden.

## Result

A neat, lightweight, and reactive module was obtained that:
= works independently of the store layout;
= smoothly updates the state without reloading the page;
= gives the user a sense of "movement towards the goal" (gamification of the purchase).

## Visual Highlights

Delivery icon from png image /content/uploads/images/free_shippling.png
Neat progress line with brand color #21a67a
Mobile block styled in the Horoshop brand style

## From the Author

The project is an example of how even a simple indicator can become a living, intelligent element of UX.
It was important for me not just to "draw a scale," but to integrate it into the ecosystem of the site so that the user felt the smoothness and logic — as if all of this is part of the core of the platform.

-----------------------------------------------------

The client's feedback is posted in my Freelancehunt profile — a real project, real feedback.