Розробка сайту барбершопа на 1С-Бітрікс

Розробка вебсайту барбершопу на 1С-Бітрікс

Вебсайт барбершопу — це портфоліо майстрів та точка входу для запису. Не корпоративний портал і не медіапроект. Відвідувач приходить з однією метою: вибрати майстра, переглянути його роботи та записатися. Друге завдання — продаж чоловічої косметики та засобів для догляду. На 1С-Бітрікс обидва завдання вирішуються однією інсталяцією: інфоблоки для каталогу послуг та майстрів, модуль sale для мерч-магазину, інтеграція з системами запису через REST API.

Каталог послуг та майстри

Інфоблок «Послуги» містить елементи: чоловіча стрижка, моделювання бороди, королівське гоління, комбо-пакет (стрижка + борода), камуфляж сідини, дитяча стрижка. Властивості кожного елемента: тривалість (хвилини), категорія (базові / преміум), опис процесу, фото результату.

Інфоблок «Майстри» — ключовий для барбершопу. Властивості:

• Фото — обов'язково професійної якості, обробляється ресайзом при завантаженні через CIBlock::ResizeImageGet
• Спеціалізація — привязка до елементів інфоблока послуг (множинна властивість типу E)
• Досвід — числове поле
• Портфоліо — множинна властивість «Файл» (фото робіт до/після)
• Рейтинг — числове, оновлюється агентом на основі відзивів
• Розклад — привязка до HL-блока розпису
• Зовнішній ID — ідентифікатор майстра в YCLIENTS / Dikidi (рядок)

На сторінці деталей майстра галерея портфоліо виводиться у форматі «до/після» з повзунком порівняння (реалізація на JS без сторонніх бібліотек — два елементи <img> у контейнері з overflow: hidden та input[type=range]). Під галереєю — відзиви, привязані до майстра через властивість типу E в інфоблоці відзивів.

Онлайн-запис: інтеграція YCLIENTS та Dikidi

Більшість барбершопів уже використовують YCLIENTS або Dikidi для внутрішнього обліку. Дублювання розпису на вебсайті — це шлях до розсинхронізації. Правильний підхід — інтеграція через API.

Схема взаємодії:

1. Відвідувач на сайті вибирає майстра (з інфоблока Бітрікс)
2. За UF_EXTERNAL_ID майстра надсилається запит до API YCLIENTS: GET /book_staff/{staff_id}/services — отримуємо актуальний список послуг з цінами
3. Відвідувач вибирає послугу → запит GET /book_dates/{staff_id} — доступні дати
4. Вибирає дату → запит GET /book_times/{staff_id}/{date} — вільні слоти
5. Підтверджує запис → POST /book_record — створення запису в YCLIENTS

Усі API-запити проходять через серверний проксі (контролер Бітрікс), а не безпосередньо з браузера — це приховує API-ключ та дозволяє кешувати відповіді. Список доступних дат кешується на 5 хвилин у CPHPCache, слоти — на 2 хвилини.

Якщо барбершоп не використовує зовнішню систему запису — бронювання будується на власному Highload-блоці розпису подібно до інших сервісних проектів: майстер × дата × час, генерація слотів агентом, захист від подвійного запису через перевірку статусу в момент підтвердження.

Зворотна синхронізація. При створенні/скасуванні запису через панель адміністратора YCLIENTS вебхук надсилає дані на ендпоїнт Бітрікс, який оновлює локальний кеш. Це гарантує, що сайт показує актуальні слоти, навіть якщо запис був зроблений по телефону.

Мерч-магазин: засоби для догляду

Розділ магазину будується на стандартній комбінації catalog + sale. Товари — помади для волосся, масла для бороди, шампуні, бальзами, аксесуари. Торговий каталог з SKU: один товар «Масло для бороди Brand X» має пропозиції за обсягом (30 мл / 50 мл / 100 мл).

Особливості реалізації:

• Рекомендації майстра — на сторінці деталей майстра виводиться блок «Рекомендує» з привязкою до товарів каталогу (властивість типу E в інфоблоці майстрів, посилання на торговий каталог)
• Покупка при запису — у процесі онлайн-запису пропонується додати товар у кошик. Реалізується через компонент перехресних продаж (catalog.section.list з фільтром за рекомендаціями майстра)
• Самовивіз з барбершопу — служба доставки sale.delivery з типом «самовивіз», привязана до адреси барбершопу. Клієнт забирає замовлення при наступному візиті

Оплата — онлайн через sale.paysystem або при візиті. Для замовлень з самовивізом за замовчуванням вибирається оплата при отриманні.

Блог про чоловічий стиль

Розділ блога на інфоблоці з категоріями: стрижки (тренди, підбір за типом обличчя), борода (догляд, стилі), стиль (одяг, аксесуари). Кожна стаття — елемент з SEO-властивостями: title, description, og:image. Автор статті привязаний до інфоблока майстрів — це розвиває особистий бренд та внутрішнє перелінкування.

ЧПУ формуються за шаблоном /blog/категорія/назва-статті/. Хлібні крошки — через компонент breadcrumb з власним шаблоном. XML-карта сайту генерується модулем SEO Бітрікс з включенням усіх розділів: послуги, майстри, блог, магазин.

Технічна основа

• Адаптивність — мобільна першість, запис на мобільному займає 3 крокі: майстер → послуга → час
• Композитний кеш — для каталогу послуг, сторінок майстрів, блога. Магазин і розпис — без кешу, AJAX
• Сповіщення — SMS-нагадування за 2 години до візиту через messageservice, push-сповіщення за наявності PWA-обгортки