Bezpłatna Wysyłka Pasek dla Mobilnego Koszyka — integracja dla Хорошоп

## Zadanie:

Zrealizować na platformie Horoshop adaptacyjny wskaźnik darmowej dostawy dla mobilnej wersji koszyka. Kluczowy warunek — pełna kompatybilność z wewnętrzną logiką strony (mmenu, overlay, dynamiczne ładowanie treści) bez ingerencji w rdzeń.

## Główne cele

= Dodawać pasek tylko przy obecności produktów w koszyku
= Automatycznie aktualizować kwotę „pozostało do darmowej dostawy” przy zmianie zamówienia
= Całkowicie ukrywać pasek, gdy koszyk jest pusty
= Wyświetlać świąteczną wiadomość „Darmowa dostawa dostępna!”
= Ukrywać wiersz „Pozostało 0 zł” przy osiągnięciu limitu
= Zapewnić poprawne działanie na wszystkich urządzeniach mobilnych bez wizualnych zakłóceń

## Realizacja techniczna

Język:
czysty JavaScript (Vanilla) bez zewnętrznych bibliotek
Obserwatory:
użyto MutationObserver do śledzenia zmian w DOM (.j-cart-product, .j-total-sum)
Logika warunkowa:
- pasek nie jest wstawiany do pustego koszyka;
- automatycznie dodawany przy pojawieniu się pierwszego produktu;
- usuwany przy usunięciu ostatniego;
- płynne aktualizowanie szerokości wskaźnika przez transition.

## Stylizacja:

wbudowany z dynamicznym podłączeniem dla pełnej autonomii.
Kompatybilność:
testowane w Safari, Chrome, Firefox na iOS / Android
Logika UX:
żadne wymuszone zamykanie koszyka ani ingerencja w mm-opening / overflow:hidden.

## Wynik

Uzyskano schludny, lekki i reaktywny moduł, który:
= działa niezależnie od układu sklepu;
= płynnie aktualizuje stan bez przeładowania strony;
= daje użytkownikowi poczucie „ruchu w kierunku celu” (gamifikacja zakupu).

## Wizualne akcenty

Ikona dostawy z png-obrazu /content/uploads/images/free_shippling.png
Schludna linia postępu w kolorze marki #21a67a
Mobilny blok zaprojektowany w firmowym stylu Horoshop

## Od autora

Projekt — przykład tego, jak nawet prosty wskaźnik może stać się żywym, inteligentnym elementem UX.
Dla mnie ważne było nie tylko „narysować skalę”, ale zintegrować ją w ekosystemie strony tak, aby użytkownik czuł płynność i logikę — jakby to wszystko było częścią rdzenia platformy.

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

Opinie klienta umieszczone w moim profilu Freelancehunt — rzeczywisty projekt, rzeczywista opinia.