Виджет Колесо фортуны (JavaScript, PHP, Json)

веб разработка, виджеты, javascript, php

Виджет Колесо фортуны (февраль 2022)

 Описание виджета

Колесо фортуны – это игровой розыгрыш подарков, один из которых посетитель может получить при осуществлении покупки в интернет-магазине. Виджет Колесо фортуны предлагает пользователю за номер телефона или email испытать удачу и выиграть один из гарантированных призов или подарков. Такой игровой интерактив стимулирует продажи и повышает конверсию сайта. Воспользоваться колесом и выиграть подарок можно только 1 раз. Скрипт встроен в код интернет-магазина косметики Unidermix.com (cms PrestaShop).

 Задача проекта

• Создать виджет Колесо фортуны скрытый в иконке подарка на каждой странице сайта. Посетитель нажимает на иконку подарка, открывается виджет в модальном окне.
• Слева – колесо, справа – текст, поле для ввода email и кнопка Крутить колесо. Посетитель вводит свой email, нажимает кнопку, колесо крутится и выпадает подарок, согласно шансу выпадения в процентах. Показывается сообщение «Вы получите письмо с промокодом для получения подарка при оформлении заказа. Благодарим за участие!».
• На почту клиента сразу приходит сгенерированный уникальный промокод, который он использует при оформлении заказа в корзине. В заказ подгружается подарок.
• Условия: Промокод можно использовать один раз. Почту для колеса можно использовать один раз. Если используется повторно, то под кнопкой показывается сообщение: «Кажется, Вы уже крутили колесо. Обязательно попробуете чуть позже, но уже с новыми подарками!»

Список из 8 подарков

1. ❤ Скидка на покупку 10%
2. ⚑ Скидка на покупку 15%
3. ♡ Бокс 3 средства
4. ❦ Бокс 4 средства
5. ☻ Глина для лица
6. ☀ Флюид для век
7. ✑ Массаж лица в клинике DMC
8. ❀ Чистка лица в клинике DMC

Таблица вероятностей с шансом выпадения

1. 45%
2. 20%
3. 6%
4. 4%
5. 10%
6. 10%
7. 2.5%
8. 2.5%

 В виджете «Колесо фортуны» реализовано:

1. Ссылка для открытия попап окна с колесом в виде gif-анимации.
2. Запуск и анимация Колеса фортуны в модальном окне. Остановка колеса на секторе, соответствующем элементу заранее созданного массива подарков. Показ сообщения об отправке промокода на почту клиента.
3. Сформирован массив из 200 перемешанных между собой элементов-подарков в соответствии с таблицей вероятности выпадения.
4. Сформирован массив из 200 элементов-промокодов для каждого подарка предыдущего массива.
5. Новые имэйлы, ip-адреса пользователей, данные массивов и порядковый номер прокрутки колеса с помощью PHP записываются в json-файл, а также все данные читаются при запуске виджета и обновляются после остановки.
6. Проверка пользователя на уникальность по email, ip-адресу и наличию записи в localStorage. Отображение сообщения о уже использованном колесе в случае неуникальности.
7. PHP отправка письма администратору магазина с названием подарка, его номером, имэйлом клиента и персональным промокодом.
8. Отправка письма клиенту с промокодом, маркетинговым текстом и тремя товарами-бестселлерами.

 Что было сделано

1. Разработан простой дизайн и создана анимированная gif-иконка в Photoshop.
2. Сверстано модальное окно с виджетом Html, Css (Atom).
3. Разработан JS скрипт Колеса фортуны.
4. Осуществлена html верстка Email письма для клиента.
5. Написаны PHP скрипты обновления и чтения json-файла и отправки почтовых писем администратору магазина и клиенту.
6. Встроены коды в файлы сайта интернет-магазина на движке PrestaShop.
7. Создано 100 одноразовых купонов с промокодами в админ-панели сайта.

JavaScript плагин адаптивных вкладок с липким меню Такие вкладки с плавающим (липким) меню в левой колонке (сайдбаре) я реализовал в плагине Responsive Sticky Menu Tabs. С его помощью их можно добавить на любую страницу сайта.

 Скриншоты

Письмо администратору:

Письмо клиенту:

Хотите, чтобы я внедрил такой виджет на ваш сайт? Просто сообщите о своем желании, я с радостью помогу осуществить это! Напишите мне на make.website.info@gmail.com:

Написать

А вы использовали какой-нибудь интерактив для повышения продаж на своем сайте? Пишите в комментариях ниже!