Створити міні-візард на 4 кроки.
Дизайн, стилі і відстані взяти з наступного шаблону -- https://www.figma.com/file/bBavX3TsEUGS0woqnAlXtw/Wedpress-Dev-Test?node-id=0%3A1
Шорткод має бути таким:
[r_test title=”Test work”]This is the description[/r_test]
Умови
- Створити дочірну тему для TwentyTwentyOne
- Коректно підключити до неї Jquery, Bootstrap 4, шрифт Inter
- Для верстки використовувати Bootstrap 4, для JavaScript можна використовувати JQuery.
- Створити і коректно підключити нові стилі і стилізувати міні-візард, щоб він виглядав ідентично до макету
- Висота міні-візарду має залишати однаковою на всіх кроках на всіх десктопных розширення, для мобільних -- має відповідати висоті контенту
- Кнопки внизу на всіх кроках мають бути на однаковій висоті від нижнього краю блоку
- Міні-візард має коректно відображатись на всіх розширеннях екранів (десктоп і мобільні).
- На першому кроці в Figma показана сітка Bootstrap, щоб можна було зрозуміти розміщення блоків та елементів (верстати сітку не потрібно)
- Title i Description має показуватися під міні-візардом
- Не потрібно щоб кроки в breadcrumbs були клікабельні, але потрібно щоб активний пункт виділявся так як показано на макеті
Опис функціоналу
Крок 1: Поля “Name”, “Email” (обов’язкове поле з валідацією, яка не пустить на наступний крок при помилці), “Phone”. Кнопка “Continue”, яка переводить на Крок 2
Крок 2: Поле для введення тільки цифр “Quantity” з максимальним значенням 1000 (обов’язкове поле з валідацією, яка не пустить на наступний крок при помилці). Кнопка “Continue”, яка переводить на Крок 3, Кнопка “Back”, яка переводить на Крок 1
Крок 3: Показує ціну, яка залежить від “Quantity” по діапазонам 1-10: $10, 11-100: $100, 101-1000: $1000. Кнопка “Send”, яка відправляє емейл на вказаний в Кроці 1 зі всіма заповненими полями на Візарду і ціною , Кнопка “Back”, яка переводить на Крок 2
Крок 4: При успішній відправці має показатися повідомлення, що лист успішно відправлено. При не успішній -- повідомлення що листа відправлено не було через проблему. Внизу кнопка “Start again” має відправляти на 1 крок, всі поля мають бути очищені від попередніх даних.
Перехід між кроками 1-3 має відбуватися через JavaScript без перезагрузки сторінки і відправки даних на бекенд.
Перехід між кроками 3-4 має відправляти дані на бекенд і слати емейл з бекенду
