Счетчик бесплатной доставки для Хорошоп (Vanilla JS)

Бизнес-задача:
Разработка инструмента для повышения среднего чека (Upsell) в интернет-магазине. Пользователь должен визуально понимать, на какую сумму ему осталось добавить товаров, чтобы получить бесплатную доставку.

Технические вызовы:
Магазин работает на закрытой платформе (Хорошоп) без доступа к backend-логике и исходным файлам шаблона. Корзина обновляется динамически через AJAX, а верстка кардинально отличается на ПК (таблицы) и смартфонах (flex-блоки).

Реализованное решение (Стек: Vanilla JS, CSS3, DOM API):

1. Написан легкий, независимый скрипт на чистом JavaScript (Zero dependencies), который легко интегрируется через админ-панель.

2. Внедрено отслеживание изменения цен через MutationObserver для максимальной производительности и экономии заряда батареи на мобильных устройствах.

3. Разработана система "умных оберток": скрипт автоматически анализирует DOM-дерево и подстраивает свою структуру ( или ), чтобы не ломать нативные flex- и grid-контейнеры платформы.

4. Создана адаптивная верстка (Pixel-perfect), которая идеально вписывается в UI-kit магазина.

5. Добавлена кастомная анимация конфетти на Canvas для позитивного эмоционального подкрепления покупателя при достижении цели.

Результат:
Бесшовно интегрированный кроссплатформенный виджет, который работает без конфликтов с ядром Хорошопа и мотивирует покупателей увеличивать сумму заказа.

#javascript #frontend #хорошоп #upsell #ecommerce #webdev #vanillajs #domapi #frontenddeveloper