Free Shipping Bar for Mobile Cart — інтеграція для Хорошоп

## Завдання:

Реалізувати на платформі Хорошоп (Horoshop) адаптивний індикатор безкоштовної доставки для мобільної версії кошика.
Ключова умова — повна сумісність із внутрішньою логікою сайту (mmenu, оверлеї, динамічне завантаження контенту) без втручання у ядро.

## Основні цілі

= Додавати бар тільки при наявності товарів у кошику
= Автоматично оновлювати суму “залишилось до безкоштовної доставки” при зміні замовлення
= Повністю приховувати бар, коли кошик порожній
= Відображати святкове повідомлення “Безкоштовна доставка доступна!”
= Ховати рядок «Залишилось 0 грн» при досягненні ліміту
= Забезпечити коректну роботу на всіх мобільних пристроях без візуальних збоїв

## Технічна реалізація

Мова:
чистий JavaScript (Vanilla) без сторонніх бібліотек
Спостерігачі:
використовувався MutationObserver для відстеження змін у DOM (.j-cart-product, .j-total-sum)
Умовна логіка:
- бар не вставляється у порожній кошик;
- автоматично додається при появі першого товару;
- видаляється при видаленні останнього;
- плавне оновлення ширини індикатора через transition.

## Стилізація:

вбудований із динамічним підключенням у для повної автономності.
Сумісність:
протестовано у Safari, Chrome, Firefox на iOS / Android
UX-логіка:
жодного примусового закриття кошика або втручання у mm-opening / overflow:hidden.

## Результат

Отримано акуратний, легкий і реактивний модуль, який:
= працює незалежно від верстки магазину;
= плавно оновлює стан без перезавантаження сторінки;
= додає користувачу відчуття “руху до цілі” (гейміфікація покупки).

## Візуальні акценти

Іконка доставки з png-зображення /content/uploads/images/free_shippling.png
Акуратна прогрес-лінія з кольором бренду #21a67a
Мобільний блок оформлено у фірмовому стилі Хорошоп

## Від автора

Проект — приклад того, як навіть простий індикатор може стати живим, інтелектуальним елементом UX.
Мені було важливо не просто «намалювати шкалу», а інтегрувати її в екосистему сайту так, щоб користувач відчував плавність і логіку — ніби все це частина ядра платформи.

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

Відгук клієнта розміщено у моєму профілі Freelancehunt — реальний проєкт, реальний фідбек.