Сайт квест-кімнат на WordPress із бронюванням
Про проект
Команда 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 — саме вона надала комплексне рішення для локалізації продукту та подальшого масштабування.
Реалізація процесу бронювання квест-кімнат
- Вибір міста.
- Вибір локації.
- Вибір квесту.
- Вибір дати та часу.
- Вибір кількості гравців.
- Введення даних користувача.
- Здійснення оплати.
- у верхній частині форми розміщено динамічний лічильник, який розраховує загальну вартість при введенні числа учасників;
- відразу під ним розташований графік, який відповідно до дат відображає доступний час для бронювання;
- справа — коротка інформація про квест.
Висновок
- переглянути доступні для замовлення квест-кімнати;
- дізнатися докладну інформацію про кожен квест;
- отримати інформацію про проведені івенти;
- легко та швидко забронювати квест-кімнату;
- зв’язатися з організацією щодо власного івента.
Комментарии