Косметичка — промосайт акции торговой сети с наборами косметики за чеки
Акция сети магазинов с брендом косметики: покупки от 600 ₽ с картой программы лояльности или заказы в доставке от 1500 ₽ регистрируют как чеки. Чеки копятся и меняются на наборы косметики, а ещё дают шансы в еженедельных розыгрышах смартфона, наушников, умной колонки и часов и в розыгрыше главного приза — чемодана косметики и подарков.
- Роль
- Фронтенд-разработчик
- Сроки
- 2026, октябрь
Задача
Собрать акцию на новой основе на Vue 3 и TypeScript: показать лендинг из Tilda внутри приложения без фрейма, встроить в него карусель наборов, сделать кабинет с шансами, историей чеков, призами и витриной, регистрацию чеков и заказ призов с доставкой.
Что входит в решение
- Лендинг из выгрузки Tilda рендерится нативным кастомным элементом в shadow DOM: стили выгрузки инлайнятся с переносом html и body на :host и @font-face в документ, скрипты пересоздаются, а поиск элементов в document подменяется поиском в shadow root — скрипты Tilda работают как на обычной странице.
- Карусель наборов — отдельный кастомный элемент на Vue внутри лендинга: вкладки по цене в чеках, автопрокрутка с переходом на следующую вкладку после последнего слайда, остаток и прогресс накопления, общий с приложением кэш запросов.
- Кабинет: шансы и чеки для обмена с подсказкой, правила начисления шансов, история чеков с шансами у каждого чека и постраничным выводом, призы с формой адреса доставки и витрина подарков с заказом.
- Регистрация чека: QR-код камерой, ручной ввод или фото чека; заказ подарка за чеки и адрес доставки приза — с окнами подтверждения.
- Данные с сервера — через TanStack Vue Query с кэшем и дедупликацией запросов, модальные окна на нативном <dialog>, проверка новой версии сайта с автоперезагрузкой.
- Вход по номеру телефона с подтверждением кода, регионы-участники, победители с поиском по телефону, адаптивная вёрстка.
Коммерческий проект в команде: весь фронтенд сделал я, промо-страница собрана в Tilda. Скриншоты сняты с локальной сборки на тестовых данных — подарки и наборы на них тоже тестовые; названия и логотипы сети, бренда-партнёра и карты скрыты, название акции размыто.