Экскурсии в Технопарк «Сколково»
Сайт экскурсий Технопарка «Сколково»: выбор даты, свободные места, бронь и оплата картой.
Экраны публичного сайта tptour.sk.ru: календарь, каталог программ и мобильная версия.
Fullstack · сайт и система бронирования
Моя роль
Разрабатываю и поддерживаю весь сайт: интерфейс на Next.js, серверные роуты заявок и оплаты, модели контента в Strapi.
- Выбор экскурсии
- Календарь, форматы экскурсий и свободные места
- Бронь и оплата
- Заявки в Bitrix24, оплата через CloudPayments
- Управление контентом
- Редактирование программ, цен и расписания в Strapi
Задача бизнеса
Запись по телефону и почте требовала вручную сверять расписание, размер группы и оплату. Посетителю нужен понятный выбор свободного сеанса, а менеджеру — возможность менять программы, цены и расписание самостоятельно.
Выбор экскурсии
Выбор даты и программы экскурсии
Вместо переписки с менеджером посетитель выбирает день и формат, а затем видит доступные программы, ограничения по возрасту, язык и стоимость.
Выбор сохраняется в ссылке
Календарь и фильтры хранятся в MobX и синхронизируются с параметрами адреса. Ссылку на выбранный день и формат можно отправить другому человеку.
Серверный рендеринг каталога
Главная и каталог рендерятся на сервере. Список программ приходит в HTML, а интерактивный календарь дополняет его на клиенте.
Бронь и оплата
Бронирование сеанса и оплата картой
После выбора сеанса посетитель заполняет заявку и оплачивает экскурсию картой. Серверные роуты передают заявку в Bitrix24 и обрабатывают статус платежа из CloudPayments.
Сеанс
Выбор даты и времени со свободными местами.
Заявка
Сбор данных для бронирования.
Оплата
Оплата картой в виджете CloudPayments.
Обработка
Передача заявки в Bitrix24. Статус платежа приходит отдельным колбэком.
Календарь и каталог на телефоне
На телефоне календарь, фильтры и список сеансов располагаются в одну колонку.
Инженерные детали
Платёжный колбэк
Статус платежа приходит отдельно от действий посетителя в браузере. Обработка вынесена в серверный маршрут.
Интеграции с CRM, оплатой и CMS
Next.js связывает бронирование с внешними сервисами: Bitrix24 принимает заявки, CloudPayments проводит оплату, Strapi хранит программы и расписание.
Управление контентом
Каталог, который обновляет сама команда
Программы, локации, мастер-классы, цены и расписание описаны в Strapi. Изменение наполнения не требует правок компонентов или нового релиза фронтенда.
Программы и направления из CMS
Менеджеры редактируют экскурсии и мастер-классы в Strapi. По этим данным сайт показывает направления и количество программ.
Переключение программ без перезагрузки
«Технопарк», Dive in, квест и Инновационный центр переключаются на одной странице без полной перезагрузки.
Результат
Сайт с бронированием и оплатой экскурсий
Разработал сайт, где посетитель выбирает программу, бронирует сеанс и оплачивает экскурсию. Команда «Сколково» сама обновляет расписание, цены и каталог в Strapi.
- 50
- мастер-классов по 20 направлениям. Менеджеры добавляют их в Strapi сами
Стек
- Next.js
- TypeScript
- MobX
- Strapi
- SCSS Modules
- CloudPayments
- Bitrix24