Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Сайт квест-кімнат на 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. Така генерація здійснюється під час передачі вибраної мови у параметрах запиту.

01

/ 02

Реалізація процесу бронювання квест-кімнат

На окрему увагу заслуговує процес бронювання квест-кімнат. Він заснований на принципі послідовного проходження кількох етапів:
  1. Вибір міста.
  2. Вибір локації.
  3. Вибір квесту.
  4. Вибір дати та часу.
  5. Вибір кількості гравців.
  6. Введення даних користувача.
  7. Здійснення оплати.
При цьому ми хотіли забезпечити зручну взаємодію користувача з гранично зрозумілим і простим інтерфейсом, щоб збір даних, що базуються на виборі відвідувача, відбувався максимально правильно і точно.
Весь процес ми розділили на три екрани. Кожен екран складається з двох кроків, які при послідовному наповненні з’являються один за одним. Наприклад, це може бути здійснення певного вибору або введення даних у поле.
У міру проходження етапів бронювання, вгорі сторінки кожен виконаний крок відображається динамічно як так званого «прогресу заповнення форми».
При цьому, у нижній частині форми з’являються динамічні підказки, на яких можна побачити дії, що вже виконані користувачем. При заповненні двох поточних кроків з’являється можливість переходу на наступний екран.
Етап, де реалізовано процес вибору кількості гравців та дати відвідування квест-кімнат, поділено на три блоки:
  • у верхній частині форми розміщено динамічний лічильник, який розраховує загальну вартість при введенні числа учасників;
  • відразу під ним розташований графік, який відповідно до дат відображає доступний час для бронювання;
  • справа — коротка інформація про квест.
На завершальному етапі відвідувачі можуть вибрати зручний спосіб оплати квесту. Поруч ми створили спеціальне поле для введення промокоду. У разі його наявності та активації відбувається автоматичний перерахунок підсумкової вартості, і учасникам надається ціна зі знижкою.

Висновок

Завдяки професійній та злагодженій роботі наших розробників, замовник отримав функціональний та повністю адаптивний сайт англійською та німецькою мовами з повним функціоналом для замовлення, оплати та бронювання квест-кімнат. Ресурс дозволяє з будь-якого пристрою:
  • переглянути доступні для замовлення квест-кімнати;
  • дізнатися докладну інформацію про кожен квест;
  • отримати інформацію про проведені івенти;
  • легко та швидко забронювати квест-кімнату;
  • зв’язатися з організацією щодо власного івента.

Бажаєте замовити сайт із функцією бронювання?

Напишіть нам, щоб прорахувати проект, скласти ТЗ та реалізувати всі функції, які будуть необхідні у Вашому конкретному випадку!

Над проектом работали