Сайт квест-комнат на WordPress с бронированием
О проекте
Команда Webnauts взяла в работу интересный проект Black Room от клиента из немецкого города Карлсруэ. Сфера деятельности заказчика — организация интеллектуального досуга, а именно: предоставление тематических квест-комнат для коллективных игр, в которых присутствует совместное разгадывание головоломок и преодоление трудностей.
На момент, когда наша команда взяла проект в работу, у заказчика уже имелось пять категорий квестов и восемь комнат, полностью готовых к игре. А число гостей Black Room к этому времени составило более 1025 человек.
Задача
От нас требовалось создать сайт, основная цель которого — привлечение клиентов с последующей продажей билетов / подарочных ваучеров и, как следствие, онлайн-бронированием квест-комнат. Целевая аудитория проекта — жители и гости Германии, желающие весело и занимательно провести свободное время.
Для этого нам нужно было разработать архитектуру, сверстать сайт по предоставленному макету, внедрить административную панель и интегрировать платёжные системы для онлайн оплаты.
Что мы сделали?
Для разработки сайта бронирования квест-комнат мы выбрали не совсем стандартный стек технологий. Для работы над back-end составляющей мы решили использовать WordPress и плагин WooCommerce.
WordPress – одна из наиболее популярных систем управления контентом в мире. С её помощью разработчики могут создавать сайты любой сложности с минимальными затратами по времени. Она проста в основении для клиентов, поэтому для редактирования и внесения контента не нужно иметь специальных знаний. Благодаря такой простоте и отзывчивости, почти 30 % всех сайтов в интернете используют эту CMS.
Front-end мы решили реализовать на «реактивном» фреймворке Vue.js, который взаимодействует с back-end частью по REST API.
Vue.js – это JavaScript-фреймворк для создания UI и полностью адаптивных сайтов и одностраничных веб-приложений. Несмотря на то, что он является библиотекой, благодаря экосистеме различных компонентов его можно масштабировать полноценного и гибкого фреймворка, который легко интегрируется с другими проектами.
С одной стороны, такое сочетание обеспечивает удобство управления и администрирования сайта, с поддержкой привычного для клиента интерфейса «админки», а с другой — впечатляющее быстродействие и качество front-end составляющей на Vue.js.
А теперь обо всём более подробно.
Front-end разработка на Vue.js
На начальном этапе провели ряд совместных обсуждений с клиентом, во время которых спланировали всю нашу дальнейшую работу. Также утвердили определённый набор технологий, который мы должны были задействовать в процессе создания сайта.
Следующим шагом стала вёрстка. Мы выполнили её в полном соответствии с отрисованным макетом дизайна и адаптировали под все наиболее распространённые устройства и дисплеи различной ширины.
Чтобы достигнуть цели проекта и привлечь клиентов с последующей продажей билетов и ваучеров, нам пришлось поработать над обеспечением индексации веб-страниц поисковыми роботами. Для этого мы должны были гарантировать качественную отрисовку страницы на стороне сервера. С этой целью мы использовали высокоуровневый фреймворк Nuxt.js с технологией SSR.
Nuxt.js — это фреймворк для создания приложений на Vue.js. Он предназначен для упрощения разработки одностраничных сервисов и сайтов. Достигается это благодаря скорости оптимизации, модульности архитектуры и удобству работы разработчиков с фреймворком. Nuxt.js сам генерирует статическую версию сайта и переносит страницы в отдельные файлы JavaScript, которые содержат только необходимый для запуска код.
Back-end разработка на WordPress
Так как заказчик был хорошо знаком с CMS WordPress, вся back-end составляющая была построена именно на этой системе управления контентом. Будущий функционал сайта мы реализовывали не напрямую через CMS, а с использованием API. Таким образом, мы смогли реализовать более сложные идеи, например, приобретение ваучеров на сайте.
Благодаря этому у посетителей сайта появилась возможность приобрести ваучер как на фиксированную сумму в 25, 50, 100 или 150 евро, так и на любую другую, которую пользователь может самостоятельно ввести вручную.
Реализация системы бронирования WooCommerce
Для того чтобы все желающие могли заранее забронировать понравившуюся квест-комнату на сайте, при разработке мы использовали систему бронирования WooCommerce и плагин WooCommerce Bookings. Это одна из самых популярных платформ, которая позволила нам реализовать способ бронирования досуга. Она даёт возможность выбирать дату и время посещения квест-комнаты, устанавливать количество участников, выводит итоговую сумму «к оплате». Дополнительно, система автоматически снижает стоимость участия в квесте для игроков в группах от трёх до семи человек.
Также мы использовали дополнительные функции от WooCommerce Bookings:
- Подтверждение предназначено для того, чтобы участник ещё раз смог просмотреть и уточнить все детали, прежде чем окончательно подтвердить бронирование комнаты.
- Автоматическое напоминание о предстоящем посещении квеста, чтобы минимизировать количество отказов и вовремя собрать всех участников игры.
Разграничение ролей и новая система оповещений
В процессе работы мы создали возможность разграничивать роли сотрудников. Это нужно для того, чтобы менеджеры имели доступы к администрированию только закреплённых за ними квест-комнат, а не ко всем комнатам одновременно.
Следующим этапом стала реализация оповещений о бронировании квест-комнат через мессенджер Telegram. До этого все подобные сообщения приходили на электронную почту менеджера. Подключив данную службу мгновенного обмена сообщениями, мы обеспечили быстрое информирование сотрудников о событии.
Интеграция платёжных систем
Следующий немалый пласт работ над back-end частью — реализация сервисов, которые, на наш взгляд, максимально охватывают все способы оплаты:
- PayPal — крупнейшая дебетовая электронная платёжная система. На сегодняшний день она популярна в разных регионах мира и обеспечивает бесконтактные платежи в двадцати пяти видах валют.
- Stripe — международная система защищённых интернет-платежей. Она позволяет принимать платежи как от частных лиц, так и от компаний, при этом комиссии остаются достаточно приемлемыми.
Таким образом, посетители имеют возможность оплатить стоимость квеста на сайте как с помощью платёжных карт, так и через системы мобильных платежей Apple Pay и Google Pay.
Ну и, конечно же, реализовали бронирование при оплате на месте.
Особенности разработки
Так как сайт бронирования квест-комнат в Германии должен был быть доступен в версиях на английском и немецком языках, очередной задачей, которую мы успешно выполнили, была мультиязычность. Для реализации перевода интерфейса, мы использовали библиотеку i18n — именно она предоставила комплексное решение для локализации продукта и дальнейшего масштабирования.
Статические тексты под каждую языковую версию мы вынесли в отдельные JSON-файлы. Получение всего динамического контента настроили через взаимодействие информационных объектов с API. Такая генерация осуществляется при передаче выбранного языка в параметрах запроса.
Реализация процесса бронирования квест-комнат
Отдельного внимания заслуживает процесс бронирования квест-комнат. Он основан на принципе последовательного прохождения нескольких этапов:
- Выбор города.
- Выбор локации.
- Выбор квеста.
- Выбор даты и времени.
- Выбор количества игроков.
- Ввод данных о пользователе.
- Совершение оплаты.
При этом мы хотели обеспечить удобное взаимодействие пользователя с предельно понятным и простым интерфейсом, чтобы сбор данных, основанных на выборе посетителя, происходил максимально правильно и точно.
Весь процесс мы разделили на три экрана. Каждый экран состоит из двух шагов, которые при последовательном заполнении появляются один за другим. Например, это может быть осуществление определённого выбора или ввод данных в поле.
По мере прохождения этапов бронирования, вверху страницы каждый выполненный шаг отображается динамически в виде так называемого «прогресса заполнения формы».
При этом, в нижней части формы появляются динамические подсказки, на которых можно увидеть действия, которые уже выполнены пользователем. При заполнении двух текущих шагов, появляется возможность перехода к следующему экрану.
Этап, где реализован процесс выбора количества игроков и даты посещения квест-комнат, разделен на три блока:
- в верхней части формы размещён динамический счётчик, который рассчитывает общую стоимость при введении числа участников;
- сразу под ним расположен график, который в соответствии с датами отображает доступное время для бронирования;
- справа — краткая информация о квесте.
На завершающем этапе посетители могут выбрать удобный способ оплаты квеста. Рядом мы создали специальное поле для ввода промокода. В случае его наличия и активации, происходит автоматический перерасчёт итоговой стоимости, и участникам предоставляется цена со скидкой.
Заключение
Благодаря профессиональной и слаженной работе наших разработчиков, заказчик получил функциональный и полностью адаптивный сайт на английском и немецком языках с полным функционалом для заказа, оплаты и бронирования квест-комнат. Ресурс позволяет с любого устройства:
- просмотреть доступные для заказа квест-комнаты;
- узнать подробную информацию о каждом квесте;
- получить информацию о проводимых ивентах;
- легко и быстро забронировать квест-комнату;
- связаться с организацией для проведения собственного ивента.
Комментарии