Сайт спортивного клубу: від розкладу до мерчу на 1С-Бітрікс

Сайт спортивного клубу: від розкладу до мерчу на 1С-Бітрікс Уявіть: уболівальник хоче купити квиток на матч, вибрати конкретне місце на схемі стадіону, а заодно замовити футболку з прізвищем гравця — все на одному сайті. І все це має працювати без гальм при пікових навантаженнях. Ми будуємо такі
Послуги, які ми пропонуємо
Показано 1 з 1Усі 1626 послуг
Сайт спортивного клубу: від розкладу до мерчу на 1С-Бітрікс
Складний
від 1 тижня до 3 місяців

Наші компетенції:

Часті запитання

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1454
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    1017
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Розробка на базі Бітрікс, Бітрікс24, 1С для компанії Development of an Online
    760
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Розробка на базі 1С Підприємство для компанії МИРСАНБЕЛ
    879
  • image_crm_dolbimby_434_0.webp
    Розробка сайту на CRM Бітрікс24 для компанії DOLBIMBY
    802
  • image_crm_technotorgcomplex_453_0.webp
    Розробка на базі Бітрікс24 для компанії ТЕХНОТОРГКОМПЛЕКС
    1162

Сайт спортивного клубу: від розкладу до мерчу на 1С-Бітрікс

Уявіть: уболівальник хоче купити квиток на матч, вибрати конкретне місце на схемі стадіону, а заодно замовити футболку з прізвищем гравця — все на одному сайті. І все це має працювати без гальм при пікових навантаженнях. Ми будуємо такі сайти на 1С-Бітрікс, де одночасно живуть розклад тренувань, турнірні таблиці, квиткова система з вибором місць і мерч-магазин. Кожен блок потребує окремої архітектури даних, а разом — грамотного кешування та тегування. Наш досвід показує, що стандартні компоненти справляються тільки при кастомному налаштуванні інфоблоків та Highload-блоків. Вартість проекту розраховується індивідуально — зв'яжіться з нами для оцінки.

Як спроектувати структуру даних для спортивного клубу?

Для спортивного клубу вибудовується ієрархія з кількох пов'язаних інфоблоків:

  • Команди — основний інфоблок із прив'язкою до виду спорту, ліги, сезону. Властивості: склад (прив'язка до інфоблоку «Спортсмени»), тренерський штаб, логотип, кольори форми.
  • Спортсмени — інфоблок з деталізованими профілями: ПІБ, амплуа, номер, антропометрія, фото у формі, статистика по сезонах (голи/очки/передачі винесені в окремий Highload-блок для швидкої вибірки).
  • Матчі та тренування — Highload-блок (b_hlblock_schedule), тому що записів за кілька сезонів набираються тисячі. Поля: дата/час, тип (тренування/матч/товариський), команда-господар, команда-гість, стадіон, статус (заплановано/триває/завершено/перенесено), рахунок.
  • Турніри — інфоблок із прив'язкою до сезону. Турнірна таблиця формується кастомним компонентом на основі результатів матчів з Highload-блоку.

Прив'язки між інфоблоками реалізуються через властивість типу «Прив'язка до елементів» (E) або через Highload-довідники, якщо потрібна продуктивність на вибірках.

Чому для розкладу використовують Highload-блоки?

Розклад тренувань і матчів — найгарячіший розділ сайту. Уболівальники заходять перевірити найближчі ігри, тренери дивляться розклад занять, адміністратори оновлюють результати в реальному часі.

Highload-блок обраний не випадково: при 300+ матчах за сезон і 5-6 командах у клубі звичайний інфоблок починає гальмувати на складних фільтраціях. Highload-блок зберігає дані в окремій таблиці MySQL, запити йдуть напряму без overhead інфоблочного API. Порівняння: Highload-блоки обробляють запити в 5 разів швидше за інфоблоки при вибірках по 10 000 записів.

Фільтрація на фронті: по команді, по типу події, по місяцю. Компонент рендерить календарну сітку з кольоровою індикацією — тренування сірим, домашні матчі зеленим, виїзні синім. Для SEO кожен матч отримує свою детальну сторінку з ЧПУ виду /matches/2024-25/spartak-vs-dinamo-12-10/.

Кеш — тегований, прив'язаний до тегу schedule_updated. При оновленні будь-якого елемента Highload-блоку через обробник події HighloadBlockOnAfterUpdate скидається саме цей тег, а не весь кеш сайту.

Як працює квиткова система з вибором місця?

Це ключова і найтехнічніше складна частина проекту. Стандартний модуль sale в Бітріксі заточений під товари в кошику — додав, оформив, оплатив. Квиток на конкретне місце в конкретному секторі — зовсім інша механіка.

Архітектура рішення: Кожен стадіон (зал, арена) описується SVG-файлом, в якому кожне місце — окремий елемент <rect> або <circle> з атрибутами data-sector, data-row, data-seat. SVG завантажується в браузер, JavaScript-обробник відповідає за інтерактив: підсвічування при наведенні, вибір місця кліком, відображення зайнятих місць сірим кольором.

Зберігання місць і станів: Створюється Highload-блок hl_stadium_seats з полями:

Поле Тип Призначення
UF_STADIUM_ID Число Прив'язка до стадіону
UF_SECTOR Рядок Код сектора (A, B, C...)
UF_ROW Число Номер ряду
UF_SEAT Число Номер місця
UF_CATEGORY Довідник Категорія (VIP, стандарт, фан-зона)
UF_PRICE_ZONE Довідник Цінова зона
UF_SVG_ID Рядок ID елемента в SVG для зіставлення

Для кожного матчу створюється таблиця бронювань — ще один Highload-блок hl_ticket_bookings:

Поле Тип Призначення
UF_MATCH_ID Число ID матчу з розкладу
UF_SEAT_ID Число ID місця з hl_stadium_seats
UF_STATUS Список free / reserved / sold / blocked
UF_ORDER_ID Число ID замовлення в модулі sale
UF_RESERVED_AT Дата/час Час бронювання (для авто-звільнення)
UF_USER_ID Число Покупець

Процес покупки покроково:

  1. Користувач відкриває сторінку матчу, завантажується SVG-схема.
  2. AJAX-запит до REST-контролера отримує масив зайнятих місць для даного матчу. JavaScript зафарбовує їх сірим і прибирає обробник кліку.
  3. Користувач клікає на вільне місце — воно позначається як reserved у hl_ticket_bookings з таймштампом. Резерв живе 15 хвилин, потім cron-агент (CTicketReserveAgent) обнуляє прострочені.
  4. Вибрані місця додаються до кошика модуля sale як товарні позиції. Для цього кожна цінова зона представлена торговою пропозицією в каталозі. Властивість кошика SEAT_INFO зберігає серіалізовані дані про конкретне місце.
  5. Оформлення замовлення стандартне — sale.order.ajax з кастомізованим шаблоном. При успішній оплаті статус змінюється на sold, генерується PDF-квиток з QR-кодом через бібліотеку TCPDF.
  6. QR містить підписаний токен (HMAC-SHA256), який перевіряється на вході сканером.

Конкурентний доступ — критичний момент. Два вболівальники не повинні забронювати одне місце. Рішення: UPDATE ... WHERE UF_STATUS = 'free' з перевіркою affected rows. Якщо повернулося 0 — місце вже зайняте, фронт показує сповіщення та перемальовує SVG.

Продуктивність SVG-схеми на мобільних Стадіон на 10 000 місць — це 10 000 DOM-елементів. На мобільних пристроях це викликає лаги. Оптимізація: Canvas-рендеринг для оглядового виду з перемиканням на SVG при зумі в конкретний сектор. Або розбивка по секторах — спочатку вибирається сектор на спрощеній схемі, потім завантажується детальна SVG тільки вибраного сектора.

Чому варто підключити турнірні таблиці через кастомний компонент?

Кастомний компонент custom:tournament.table агрегує дані з Highload-блоку матчів: рахує очки (3 за перемогу, 1 за нічию), різницю забитих/пропущених, сортує. Результат кешується з тегом tournament_{ID}, скидається при оновленні рахунку будь-якого матчу в цьому турнірі.

Для командних видів спорту з плей-оф компонент вміє рендерити сітку play-off (bracket) через SVG — пари, переможці, лінії зв'язків між раундами.

Профілі спортсменів

Детальна сторінка спортсмена включає: фото, біографію, кар'єрні досягнення (таймлайн через властивість інфоблоку «множинне» — клуб, роки, досягнення), статистику поточного сезону з Highload-блоку, галерею фото/відео з прив'язкою через CIBlockElement::GetProperty.

Для SEO — мікророзмітка schema.org/Person з athlete у полі jobTitle, прив'язка до schema.org/SportsTeam.

Фан-зона та мерч-магазин

Новинний розділ реалізується стандартним компонентом news.list / news.detail з доопрацьованим шаблоном. Фото- та відеогалерея — інфоблок з прив'язкою до матчів і спортсменів.

Мерч-магазин — повноцінний інтернет-магазин на модулі catalog + sale: футболки, шарфи, атрибутика. Торгові пропозиції за розміром і кольором, інтеграція з 1С для обліку залишків. Працює паралельно з квитковою системою, але в окремому типі інфоблоку, щоб каталог товарів не перетинався з квитками.

Інтеграція з квитковими операторами

Якщо клуб продає квитки не тільки через свій сайт, але й через Ticketland, Kassir.ru або аналогічні системи — потрібна синхронізація. Реалізується через REST API квиткового оператора: при бронюванні/продажу на стороні оператора webhook оновлює статус у hl_ticket_bookings. І навпаки — продаж на сайті відправляє дані оператору.

Cron-агент синхронізації запускається кожні 2 хвилини, щоб підтягнути зміни, які могли не дійти через webhook (мережеві збої, таймаути).

Етапи розробки

Етап Склад робіт Строк
Проектування Структура інфоблоків, HL-блоків, прототипи SVG-схем 2–3 тижні
Верстка та фронтенд Адаптивні шаблони, інтерактивна SVG-схема, календар 3–4 тижні
Бекенд квиткової системи Модуль бронювання, інтеграція з sale, PDF-квитки 4–5 тижнів
Контент та каталоги Профілі спортсменів, турнірні таблиці, мерч-магазин 2–3 тижні
Інтеграції Квиткові оператори, 1С, платіжні системи 2–3 тижні
Тестування Навантажувальне тестування SVG (10 000 місць), конкурентне бронювання 1–2 тижні
Запуск і супровід Деплой, моніторинг агентів, навчання редакторів 1 тиждень

Що входить у роботу

  • Повна документація щодо структури інфоблоків, HL-блоків, налаштувань кешування.
  • Вихідний код усіх кастомних компонентів і агентів у репозиторії.
  • Навчання редакторів: як додавати матчі, оновлювати статистику, завантажувати SVG-схеми.
  • Гарантійна підтримка протягом 1 місяця після запуску — виправлення помилок, консультації.

Ми гарантуємо коректну роботу системи при пікових навантаженнях до 10 000 одночасних відвідувачів. Зв'яжіться з нами для оцінки проекту — ми підготуємо комерційну пропозицію. Отримайте консультацію з архітектури вашого спортивного сайту.