Прогрес до подарунка
Блок показує прогрес-бар із залишком до безкоштовного подарунка: «ще 250 грн — і подарунок ваш». Реальну суму кошика бере з DOM магазину за CSS-селектором (з фолбеком на 0), тому цифри завжди чесні. При досягненні порога стан змінюється на «Подарунок ваш». Мотивує покупця додати ще один товар і піднімає середній чек у кошику.
Клієнт кладе один товар і йде на оформлення — середній чек низький. Він не знає, що трохи більше — і отримає подарунок чи безкоштовну доставку.
Що налаштовується в конструкторі
- Поріг для подарунка
- Валюта (підпис)
- Іконка (емодзі)
- Текст коли кошик порожній
- Текст прогресу (можна {left} і {cur})
- Текст коли поріг досягнуто
- Колір фону
- Колір заповнення/акцент
- Заокруглення кутів
- Плашка-статус (у процесі)
- Плашка-статус (готово)
11 налаштувань · 4 пресетів · під Хорошоп
Купуєте один раз — назавжди.
3 блоки −10% · 5 −20% · 10 −30%
Живе прев'ю
Так блок виглядає на сторінці. Кольори й тексти підлаштуєте в конструкторі.
Прев'ю інтерактивне — наведіть і клікніть, щоб перевірити поведінку блока.
Як це працює
- Читає суму кошика з DOM і показує шкалу: «ще N грн — і подарунок ваш»
- Дійшов до порогу — «Подарунок ваш!»; шкала заповнюється в реальному часі
- Поріг, валюту й тексти задаєте самі; сам знаходить підсумок кошика Хорошопа (.j-total-sum)
- Не на сторінці кошика — не показується; порожній кошик — акуратне «додайте товари»
Питання
Звідки береться сума?
Читається прямо з підсумку кошика/чекауту (типові класи Хорошопа, напр. .j-total-sum). Нічого не тягне ззовні, оновлюється при зміні кошика.
Що показувати як подарунок?
Ставте це ТІЛЬКИ якщо реально даруєте щось від суми (подарунок, безкоштовну доставку). Поріг і текст — під ваш реальний оффер, інакше введете покупця в оману.
Впливає на швидкість?
Ні — один невеликий інлайн-скрипт без зовнішніх запитів, у «Скрипти після тегу body».
Працює на мобільному?
Так, шкала зʼявляється біля підсумку кошика і на ПК, і на телефоні.