Как сделать выбор приза в виде колеса-рулетки через форму ZeroBlock в Tilda
SHOW GIFT
Gift Ideas 2021
ONLY 5 DAYS
Make home essentials your one shop stop for all things gifting! Shop someone you really care with a personalized gift.
Сейчас узнаем, какой подарок выпадет именно Вам.
Вращайте колесо!
Вращайте колесо!
Как сделать выбор приза в виде колеса-рулетки через форму ZeroBlock в Tilda
1
Создали ZeroBlock с кнопкой вызова окна. Задали этой кнопке класс open-wheel
2
Создаём ZeroBlock для формы и колеса
Высота Window - 100%
Высота Grid по экранам 700/700/920/810/690
Высота Window - 100%
Высота Grid по экранам 700/700/920/810/690
3
Создаём Add HTML, очищаем его.
Задаём ему класс wheelfortune
Выставляем размеры сторон (квадрат) - 500/500/500/380/260
Задаём ему класс wheelfortune
Выставляем размеры сторон (квадрат) - 500/500/500/380/260
4
Создаём элемент для кнопки вращения с классом spin_wheel
(в примере это Image)
(в примере это Image)
5
Создаём Image с подарком. Задаём ему класс present_img
6
Создаём Text под подарком. Задаём ему класс present_text
7
Создаём форму с классом wheel_form
В форму добавляем скрытое поле (hidden field)
C именем sector_prize
В форму добавляем скрытое поле (hidden field)
C именем sector_prize
8
Вставили код на страницу в блок Т123
В коде прописали цвет секторов, название секторов и ссылки на иконки
['#EBF7FE' , 'Cертификат<br><strong>На 5000 руб</strong>' , 'https://static.tildacdn.com/tild3732-3366-4666-b137-636632616132/901435.svg'],
['#C7E2FB' , 'Мороженка<br><strong>5 кг барбарис</strong>' , 'https://static.tildacdn.com/tild6564-3832-4466-a662-333733396635/3189701.svg'],
['#EBF7FE' , 'Подарок<br><strong>Что-то полезное</strong>' , 'https://static.tildacdn.com/tild3364-3432-4437-b065-663536363437/4062925.svg'],
['#C7E2FB' , 'Игрушка<br><strong>Плюшевый мишка</strong>' , 'https://static.tildacdn.com/tild6631-3132-4330-b130-643839333161/3989895.svg'],
['#EBF7FE' , 'Букет цветов<br><strong>33 красные розы</strong>' , 'https://static.tildacdn.com/tild3830-3439-4764-b831-313939346337/3095126.svg'],
['#C7E2FB' , 'Пицца<br><strong>50 см Маргарита</strong>' , 'https://static.tildacdn.com/tild6239-3933-4839-a666-303739343233/1404945.svg'],
['#EBF7FE' , 'Самокат<br><strong>Yedoo Mula RunRun</strong>' , 'https://static.tildacdn.com/tild6666-3931-4639-b563-306134666563/2513205.svg'],
['#C7E2FB' , 'Рюкзак<br><strong>Bobby Hero</strong>' , 'https://static.tildacdn.com/tild3035-3230-4136-a235-316639663465/2333041.svg'],
['#EBF7FE' , 'Скидка<br><strong>25% на всё</strong>' , 'https://static.tildacdn.com/tild3366-6430-4430-a361-353063346339/582843.svg'],
В коде прописали цвет секторов, название секторов и ссылки на иконки
['#EBF7FE' , 'Cертификат<br><strong>На 5000 руб</strong>' , 'https://static.tildacdn.com/tild3732-3366-4666-b137-636632616132/901435.svg'],
['#C7E2FB' , 'Мороженка<br><strong>5 кг барбарис</strong>' , 'https://static.tildacdn.com/tild6564-3832-4466-a662-333733396635/3189701.svg'],
['#EBF7FE' , 'Подарок<br><strong>Что-то полезное</strong>' , 'https://static.tildacdn.com/tild3364-3432-4437-b065-663536363437/4062925.svg'],
['#C7E2FB' , 'Игрушка<br><strong>Плюшевый мишка</strong>' , 'https://static.tildacdn.com/tild6631-3132-4330-b130-643839333161/3989895.svg'],
['#EBF7FE' , 'Букет цветов<br><strong>33 красные розы</strong>' , 'https://static.tildacdn.com/tild3830-3439-4764-b831-313939346337/3095126.svg'],
['#C7E2FB' , 'Пицца<br><strong>50 см Маргарита</strong>' , 'https://static.tildacdn.com/tild6239-3933-4839-a666-303739343233/1404945.svg'],
['#EBF7FE' , 'Самокат<br><strong>Yedoo Mula RunRun</strong>' , 'https://static.tildacdn.com/tild6666-3931-4639-b563-306134666563/2513205.svg'],
['#C7E2FB' , 'Рюкзак<br><strong>Bobby Hero</strong>' , 'https://static.tildacdn.com/tild3035-3230-4136-a235-316639663465/2333041.svg'],
['#EBF7FE' , 'Скидка<br><strong>25% на всё</strong>' , 'https://static.tildacdn.com/tild3366-6430-4430-a361-353063346339/582843.svg'],
9
Если нужно корректировать вероятность, то пишем true и проставляем процент на каждый сектор
//Вероятность
let prob = true; // true - включить смещение вероятности ; false - отключить
let probability = [10, 15, 15, 10, 5, 10, 5, 10, 20]; //Распределение вероятности в процентах
//Вероятность
let prob = true; // true - включить смещение вероятности ; false - отключить
let probability = [10, 15, 15, 10, 5, 10, 5, 10, 20]; //Распределение вероятности в процентах