Задание: HTML-верстальщик. Адаптивная вёрстка виджета и функционал бронирования (Дистанционная работа)
Необходимо разработать функционал для системы онлайн-бронирования фотостудии, который включает отображение доступного времени для бронирования в виде календаря. Пользователи должны иметь возможность выбирать дату и время, видеть занятое время и получать информацию о ценах на забронированные слоты.
Функциональные требования
1. Отображение календаря
• По умолчанию:
◦ Календарь должен отображать текущую неделю.
• Выбор недели:
◦ При выборе любой другой недели должен отправляться AJAX-запрос на PHP-скрипт, который возвращает информацию о занятом времени на выбранную неделю.
2. AJAX-запрос для получения занятых временных слотов
• URL для запроса (пример): /widget/api/event/freetimes/byweek?widget_key=a529bf27ffb95cba8b21e169ec547685&date=2025-05-12&hall_id=1880&order_type=&company_id=1352
• Формат запроса:
◦ Метод: GET
◦ Параметр: byweek (неделя для запроса)
• Формат ответа (JSON):
{
"events": [
{
"date_end": "2025-05-12 19:00:00",
"date_start": "2025-05-12 18:00:00",
"duration": 60,
"status": "request"
},
...
]
}
3. Парсинг полученного ответа
• Полученные данные должны парситься JavaScript-скриптом.
• На основе этих данных формируется календарь, где занятое время должно отображаться неактивными для выбора.
4. Выбор времени в календаре
• При клике по ячейке в календаре, представляющей определённую дату и время, должен отправляться AJAX-запрос на PHP-скрипт для получения информации о стоимости.
5. AJAX-запрос для получения цен
• URL для запроса: widget/api/event/price?widget_key=a529bf27ffb95cba8b21e169ec547685&date_start=2025-05-15&time=11%3A00&duration=60&hall_id=1880&guest_count=0&order_type=&coupon_code=&company_id=1352
• Формат запроса:
◦ Метод: GET
◦ Параметры: date_start (дата выбранного времени), time (выбранное время)
• Формат ответа (JSON):
{
"price": {
"discount": 0,
"origin": 1300,
"prepay": 650,
"prepay_decline": {
"date": "2025-05-09T09:30:39",
"minutes": 1440,
"past": 0,
"timestamp": 1746772239
},
"total": 1300
},
"status": "ok"
}
6. Парсинг ценовой информации
• Полученные данные должны парситься JavaScript-скриптом.
• Информация о стоимости должна отображаться в пользовательском интерфейсе, включая:
◦ Оригинальная цена (origin)
◦ Сумма предоплаты (prepay)
◦ Общая стоимость (total)
◦ Любые скидки или условия предоплаты
Нефункциональные требования
• Производительность: AJAX-запросы должны обрабатываться быстро, чтобы пользовательский интерфейс оставался отзывчивым.
• Кроссбраузерность: Конечный продукт должен корректно работать в актуальных версиях всех популярных браузеров.
Примечания
• Все используемые пути к скриптам и параметры должны быть согласованы с продакшн средой для корректной работы.
• Протестировать функциональность на этапе разработки и перед запуском, чтобы убедиться в правильной работе всех функций.
Необходимо сделать адаптивную вёрстку виджета онлайн бронирования. Все нюансы изменения элементов при наведении и нажатии уже при дальнейшем общении.
