Сайт квест-комнат на 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. Такая генерация осуществляется при передаче выбранного языка в параметрах запроса.
Реализация процесса бронирования квест-комнат
Отдельного внимания заслуживает процесс бронирования квест-комнат. Он основан на принципе последовательного прохождения нескольких этапов:
- Выбор города.
- Выбор локации.
- Выбор квеста.
- Выбор даты и времени.
- Выбор количества игроков.
- Ввод данных о пользователе.
- Совершение оплаты.
При этом мы хотели обеспечить удобное взаимодействие пользователя с предельно понятным и простым интерфейсом, чтобы сбор данных, основанных на выборе посетителя, происходил максимально правильно и точно.
Весь процесс мы разделили на три экрана. Каждый экран состоит из двух шагов, которые при последовательном заполнении появляются один за другим. Например, это может быть осуществление определённого выбора или ввод данных в поле.
По мере прохождения этапов бронирования, вверху страницы каждый выполненный шаг отображается динамически в виде так называемого «прогресса заполнения формы».
При этом, в нижней части формы появляются динамические подсказки, на которых можно увидеть действия, которые уже выполнены пользователем. При заполнении двух текущих шагов, появляется возможность перехода к следующему экрану.
Этап, где реализован процесс выбора количества игроков и даты посещения квест-комнат, разделен на три блока:
- в верхней части формы размещён динамический счётчик, который рассчитывает общую стоимость при введении числа участников;
- сразу под ним расположен график, который в соответствии с датами отображает доступное время для бронирования;
- справа — краткая информация о квесте.
На завершающем этапе посетители могут выбрать удобный способ оплаты квеста. Рядом мы создали специальное поле для ввода промокода. В случае его наличия и активации, происходит автоматический перерасчёт итоговой стоимости, и участникам предоставляется цена со скидкой.
Заключение
Благодаря профессиональной и слаженной работе наших разработчиков, заказчик получил функциональный и полностью адаптивный сайт на английском и немецком языках с полным функционалом для заказа, оплаты и бронирования квест-комнат. Ресурс позволяет с любого устройства:
- просмотреть доступные для заказа квест-комнаты;
- узнать подробную информацию о каждом квесте;
- получить информацию о проводимых ивентах;
- легко и быстро забронировать квест-комнату;
- связаться с организацией для проведения собственного ивента.
Про проект
Команда Webnauts взяла в роботу цікавий проект Black Room від клієнта з німецького міста Карлсруе. Сфера діяльності замовника — організація інтелектуального дозвілля, а саме: надання тематичних квест-кімнат для колективних ігор, у яких є спільне розгадування головоломок та подолання труднощів.
На момент, коли наша команда взяла проект у роботу, замовник вже мав п’ять категорій квестів і вісім кімнат, повністю готових до гри. А кількість гостей Black Room на цей час склала понад 1025 осіб.
Завдання
Від нас потрібно створити сайт, основна мета якого – залучення клієнтів з подальшим продажем квитків / подарункових ваучерів і, як наслідок, онлайн-бронюванням квест-кімнат. Цільова аудиторія проекту — жителі та гості Німеччини, які бажають весело та цікаво провести вільний час.
Для цього нам потрібно було розробити архітектуру, згорнути сайт за наданим макетом, впровадити адміністративну панель та інтегрувати платіжні системи для онлайн оплати.
Що ми зробили?
Для розробки сайту бронювання квест-кімнат ми вибрали не зовсім стандартний стек технологій. Для роботи над back-end складовою ми вирішили використовувати WordPress та плагін WooCommerce.
WordPress – одна з найпопулярніших систем управління контентом у світі. З її допомогою розробники можуть створювати сайти будь-якої складності з мінімальними витратами за часом. Вона проста в основі для клієнтів, тому для редагування та внесення контенту не потрібно мати спеціальних знань. Завдяки такій простоті та чуйності, майже 30% всіх сайтів в Інтернеті використовують цю CMS.
Front-end ми вирішили реалізувати на «реактивному» фреймворку Vue.js, який взаємодіє з back-end частиною REST API.
З одного боку, таке поєднання забезпечує зручність управління та адміністрування сайту, за допомогою звичного для клієнта інтерфейсу «адмінки», а з іншого — вражаюча швидкодія та якість 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. Таким чином, ми змогли реалізувати складніші ідеї, наприклад, придбання ваучерів на сайті.
Реалізація системи бронювання WooCommerce
Для того щоб усі бажаючі могли заздалегідь забронювати квест-кімнату, що сподобалася на сайті, при розробці ми використовували систему бронювання
WooCommerce та плагін WooCommerce Bookings. Це одна з найпопулярніших платформ, яка дозволила нам реалізувати спосіб бронювання дозвілля. Вона дає можливість обирати дату та час відвідування квест-кімнати, встановлювати кількість учасників, виводить підсумкову суму «до оплати». Додатково система автоматично знижує вартість участі в квесті для гравців у групах від трьох до семи осіб.
- Підтвердження призначений для того, щоб учасник ще раз зміг переглянути та уточнити всі деталі, перш ніж остаточно підтвердити бронювання кімнати.
- Автоматичне нагадування про майбутнє відвідування квесту, щоб мінімізувати кількість відмов та вчасно зібрати всіх учасників гри.
Розмежування ролей та нова система оповіщень
У процесі роботи ми створили можливість
розмежовувати ролі співробітників. Це потрібно для того, щоб менеджери мали доступ до адміністрування лише закріплених за ними квест-кімнат, а не до всіх кімнат одночасно.
Наступним етапом стала реалізація оповіщень про бронювання квест-кімнат через месенджер Telegram. До цього всі подібні повідомлення надходили на електронну пошту менеджера. Підключивши службу миттєвого обміну повідомленнями, ми забезпечили швидке інформування співробітників про подію.
Інтеграція платіжних систем
Наступний чималий пласт робіт над back-end частиною — реалізація сервісів, які, на наш погляд, максимально охоплюють усі способи оплати:
- PayPal — Найбільша дебетова електронна платіжна система. На сьогоднішній день вона популярна у різних регіонах світу та забезпечує безконтактні платежі у двадцяти п’яти видах валют.
- Stripe — міжнародна система захищених інтернет-платежів. Вона дозволяє приймати платежі від приватних осіб, і від компаній, у своїй комісії залишаються досить прийнятними.
Таким чином, відвідувачі мають можливість сплатити вартість квесту на сайті як за допомогою платіжних карток, так і через системи мобільних платежів. Apple Pay та Google Pay.
Ну і, звичайно, реалізували бронювання при оплаті на місці.
Особливості розробки
Оскільки сайт бронювання квест-кімнат у Німеччині мав бути доступний у версіях англійською та німецькою мовами, черговим завданням, яке ми успішно виконали, була мультимовність. Для реалізації перекладу інтерфейсу ми використовували бібліотеку i18n — саме вона надала комплексне рішення для локалізації продукту та подальшого масштабування.
Реалізація процесу бронювання квест-кімнат
- Вибір міста.
- Вибір локації.
- Вибір квесту.
- Вибір дати та часу.
- Вибір кількості гравців.
- Введення даних користувача.
- Здійснення оплати.
- у верхній частині форми розміщено динамічний лічильник, який розраховує загальну вартість при введенні числа учасників;
- відразу під ним розташований графік, який відповідно до дат відображає доступний час для бронювання;
- справа — коротка інформація про квест.
Висновок
- переглянути доступні для замовлення квест-кімнати;
- дізнатися докладну інформацію про кожен квест;
- отримати інформацію про проведені івенти;
- легко та швидко забронювати квест-кімнату;
- зв’язатися з організацією щодо власного івента.
Комментарии