Обзор DHTMLX Booking
Обзор
JavaScript Booking — это готовый компонент, предназначенный для простого встраивания в ваше приложение. Он предоставляет конечным пользователям функциональность для онлайн-записи на приём и широкие возможности фильтрации. Виджет адаптивен и оптимизирован для мобильных устройств.
Структура Booking
Интерфейс Booking включает две основные части: область фильтрации и список карточек со слотами. Вид каждой карточки состоит из информационного блока карточки и слотов, доступных для бронирования.
Список карточек
Все карточки отображаются в виде списка. Левая часть каждой карточки показывает следующие элементы информации:
- preview: изображение карточки
- review: информация о рейтинге с количеством звёзд (из пяти) и числом отзывов
- category: название категории карточки (например, специализация специалиста)
- title: заголовок карточки (например, имя специалиста)
- subtitle: подзаголовок карточки (например, сведения об опыте)
- price: стоимость услуги
- details: прочие сведения о карточке
Слоты
Правая часть каждой карточки содержит кликабельные слоты, доступные для бронирования. Слоты отображаются на следующие шесть дней (четыре на узких экранах), начиная с текущей даты или даты начала, выбранной в фильтре.
Просмотр отдельной карточки
Чтобы открыть просмотр отдельной карточки, кликните по левой части карточки. В диалоге одиночной карточки отображаются заголовок карточки, календарь и доступные слоты для выбранной в календаре даты.
Диалог бронирования
Диалог бронирования позволяет забронировать слот выбранной карточки. Чтобы открыть его, кликните по кнопке временного слота.
Инструкции по бронированию см. в разделе Запись на приём.
Фильтрация данных
Чтобы отфильтровать карточки по различным текстовым полям, дате и времени, пользователь должен ввести нужные значения в поля ввода и нажать кнопку Search. По умолчанию пользователь может фильтровать карточки по категории и заголовку. По умолчанию для фильтрации доступны следующие временные диапазоны:
- from: 8, to: 12 (Morning)
- from: 12, to: 17 (Afternoon)
- from: 17, to: 20 (Evening)
Настроить параметры фильтра можно через АПИ: Настройка фильтра
Запись на приём
Чтобы записаться на приём, кликните по кнопке временного слота нужной карточки, в диалоге Booking заполните поля и нажмите Make an appointment.
Также можно записаться через просмотр отдельной карточки:
- Кликните по левой части карточки.
- В открывшемся просмотре одиночной карточки выберите нужную дату и время.
- Рядом с выбранным временем нажмите Confirm.
- В появившемся диалоге Booking заполните поля и нажмите Make an appointment.
Что дальше
Теперь вы можете приступить к созданию простого виджета Booking на своей странице.