Table Stories
Подберите мастер-класс, сравните даты, укажите число участников и пожелания по питанию, проверьте свободные места и итоговую цену, затем отправьте заявку.
- Nuxt
- Vue
- TypeScript
- Nuxt UI
Задача
Для бронирования недостаточно описания занятия. Нужно подобрать дату со свободными местами, учесть ограничения по числу участников и питанию и заранее увидеть итоговую цену.
Как устроен сценарий
-
Найти подходящее занятие
В каталоге можно выбрать формат и тему, а затем сравнить длительность, сложность, даты и цену.
-
Изучить мастер-класс
До бронирования видны программа, ведущий, площадка, включённые материалы, доступные даты и время.
-
Выбрать дату и условия
Пользователь указывает время, число участников и пожелания по питанию. Свободные места и итоговая цена обновляются сразу.
-
Отправить заявку
Если число свободных мест изменилось или сервис временно недоступен, форма сохраняет введённые данные и позволяет повторить отправку.
Поиск мастер-класса и бронирование
В каталоге, описании занятия и сводке бронирования сохраняются выбранный мастер-класс, два места и вегетарианское меню.
Один подходящий мастер-класс
После выбора августа и итальянской кухни в каталоге остаётся занятие по пасте.
Условия до бронирования
До открытия формы можно проверить программу, площадку, длительность, свободное время и цену.
Готовая сводка бронирования
В итоге вместе видны два участника, вегетарианское меню, площадка, время и следующие шаги.
Сложные состояния
-
Число участников зависит от даты
Допустимое число участников рассчитывается по оставшимся местам на выбранную дату, а не задаётся одним пределом для всего каталога.
-
Изменение свободных мест не обрывает заявку
Если после выбора доступность изменилась, форма объясняет причину, сохраняет остальные ответы и предлагает следующее допустимое действие.