Розробка сайту кафе на 1С-Бітрікс з бронюванням та меню

Сайт кафе вирішує три завдання: показати меню, привести гостя та прийняти бронь. Звучить просто, але 90% відвідувачів відкриють його з телефона, стоячи на вулиці або гортаючи стрічку. Якщо сторінка завантажується більше трьох секунд або меню не можна прочитати без зуму — гість піде до конкурента через дорогу. Наш досвід показує: правильна архітектура на 1С-Бітрікс вирішує ці проблеми. Ми розробили сайти для 15+ закладів, тому знаємо типові вузькі місця та способи їх обходу.

На 1С-Бітрікс кафе отримує керований каталог меню через інфоблоки, бронювання через веб-форми з передачею в CRM та технічну основу, яку адміністратор оновлює без розробника. Проект реалізується під ключ за 6–8 тижнів з гарантією та підтримкою після запуску.

Як реалізувати меню через інфоблоки?

Меню — центральний елемент сайту. Структура інфоблоку «Меню»:

• Розділи — категорії страв (сніданки, салати, супи, гаряче, десерти, напої, бар)
• Елементи — конкретні страви

Властивості елемента:

• Назва — обов'язкове, виводиться на картці
• Опис — склад та особливості
• Вага/об'єм — строкова властивість (150 г, 300 мл)
• Калорійність — числова властивість, виведення опціональне
• Алергени — множинний список (глютен, лактоза, горіхи, морепродукти)
• Фотографія — файлова властивість, обов'язкова
• Мітка — список (новинка, хіт, гостре, вегетаріанське)
• Активність — стандартне поле, дозволяє приховувати страви без видалення

Адміністратор працює через стандартний інтерфейс інфоблоку: додає страву, завантажує фото, ставить мітку «бізнес-ланч» — і вона з'являється на сайті. Сортування через поле «Сорт» — шеф-кухар може виділити сезонні позиції, піднявши їх вгору.

На фронті меню відображається з фільтрацією за категорією (таби або бічне меню) та іконками алергенів. Без пагінації — все меню на одній сторінці з якірними посиланнями, щоб гість міг прогортати цілком.

Акції та бронювання: як не втратити клієнта?

Акції та бізнес-ланчі

Окремий інфоблок «Акції» з властивостями:

• Заголовок та опис акції
• Дата початку / дата закінчення — властивості типу «дата», елемент автоматично приховується після завершення
• Тип — список (бізнес-ланч, знижка, сезонна пропозиція, комбо)
• Прив'язка до страв — зв'язок з інфоблоком меню

Бізнес-ланчі оновлюються щотижня. Для зручності адміністратора створюється шаблон: копіювання елемента минулого тижня зі зміною страв та дат. На головній сторінці — блок з поточними акціями, сформований компонентом news.list з фільтром за активними датами.

Бронювання столиків

Кафе — не ресторан з системою управління залом. Інтеграція з R-Keeper або iiko для бронювання тут надмірна. Достатньо веб-форми:

• Ім'я гостя
• Телефон (маска введення)
• Дата та час
• Кількість гостей
• Побажання (текстове поле)

Форма створюється через модуль form або компонент зворотного зв'язку. Дані надходять на email адміністратору і паралельно створюють лід у CRM Бітрікс24 (при підключенні хмари) або записуються в модуль crm коробки. Адміністратор підтверджує бронь по телефону.

Для захисту від спаму — Google reCAPTCHA v3 (невидима для користувача) та обмеження на кількість заявок з одного IP.

Фотогалерея, відгуки та контакти

Фотогалерея інтер'єру

Інфоблок «Галерея» з розділами: зал, тераса, банкетний зал, кухня. Фотографії завантажуються у множинну властивість типу «файл». На фронті — masonry-сітка з lightbox (Fancybox або аналог). Важливо: фотографії мають бути професійними — це не задача розробки, але варто зафіксувати вимоги до контенту на етапі ТЗ.

Відгуки

Модуль відгуків — стандартний інфоблок з премодерацією. Гість залишає відгук через форму (ім'я, текст, оцінка від 1 до 5), адміністратор перевіряє та публікує. Середня оцінка розраховується кешованим компонентом і виводиться на головній. Відгуки розмічаються через Schema.org Review — агрегований рейтинг відображається в пошуковій видачі.

Карта проїзду та контакти

Яндекс.Карти або Google Maps через API. Мітка з адресою, можливість побудувати маршрут. Години роботи розмічені через Schema.org OpeningHoursSpecification. Телефон — клікабельний (tel:), при натисканні з мобільного — виклик.

SEO-розмітка: Schema.org Restaurant

Мікророзмітка Restaurant охоплює:

• name, address, telephone
• openingHours — години роботи
• servesCuisine — тип кухні
• menu — посилання на сторінку меню
• aggregateRating — середній рейтинг з відгуків
• image — фотографія закладу

Розмітка додається в шаблон компонента через JSON-LD. Перевіряється через Google Rich Results Test перед запуском.

Мобільна оптимізація: Core Web Vitals та WebP

Для кафе мобільний трафік становить 85–95%. Телефон, адреса, меню — все, що шукають на ходу. Якщо LCP (Largest Contentful Paint) перевищує 2.5 секунди, Google знижує позиції, а гість закриває вкладку.

Проблема номер один — зображення. Фотографії страв та інтер'єру важкі: 2–5 МБ з камери фотографа. На мобільному екрані шириною 375px завантажувати картинку 2400px — марнотратство. WebP стискає зображення на 30% ефективніше за JPEG, що економить бюджет на хостингу та прискорює завантаження. Формат WebP розроблений Google і підтримується всіма сучасними браузерами (WebP).

Рішення на рівні 1С-Бітрікс:

Штатне масштабування через CFile::ResizeImageGet() генерує мініатюри при першому запиті. Налаштовуємо набір розмірів:

• Картка меню (мобільна) — 400×300, якість 80%, формат WebP
• Картка меню (десктоп) — 800×600, якість 85%, формат WebP
• Галерея (прев'ю) — 600×400, WebP
• Галерея (повнорозмірна) — 1600×1200, WebP з fallback на JPEG

У шаблоні компонента використовується тег <picture> з <source> для WebP та <img> для JPEG-фолбеку. Атрибут srcset із зазначенням розмірів дозволяє браузеру вибрати оптимальну версію.

Lazy loading — атрибут loading="lazy" на всіх зображеннях нижче першого екрану. Для меню це означає: перші 3–4 страви завантажуються одразу, решта — по мірі прокрутки. Intersection Observer API при необхідності кастомної поведінки.

Кешування: компоненти Бітрікс кешуються штатно (налаштування часу кешу в параметрах компонента). Статика (CSS, JS, шрифти) віддається з заголовками Cache-Control: max-age=31536000 через налаштування nginx. Для зображень — аналогічно, з інвалідацією через зміну імені файлу при оновленні.

Шрифти: один шрифт, два накреслення (regular, bold), підключення через font-display: swap, попереднє завантаження через <link rel="preload">. Ніяких Google Fonts — файли хостяться локально, виключаючи зайвий DNS-lookup.

Мініфікація та стиснення: CSS та JS об'єднуються та мініфікуються штатними засобами Бітрікс (налаштування в головному модулі). Gzip або Brotli — на рівні nginx.

Кейс з практики: На проекті кафе «Смаколик» ми зіткнулися з LCP 4.2 с через неоптимізовані фотографії страв. Після впровадження WebP з srcset, lazy loading та кешування статики вдалося знизити LCP до 1.8 с. CLS зменшився з 0.35 до 0.05 завдяки фіксованим розмірам зображень. Це призвело до зростання конверсії бронювань на 30% протягом першого місяця після запуску.

Результат: LCP < 2 секунд, CLS < 0.1, FID < 100 мс. Перевіряється через PageSpeed Insights та реальні дані з Chrome UX Report після накопичення статистики. Наші сертифіковані інженери гарантують відповідність цим метрикам.

Якщо ви хочете отримати сайт, який швидко завантажується та приносить броні, зв'яжіться з нами для консультації.

Що входить в розробку сайту кафе

• Документація: ТЗ, структура меню, маршрутизація форм
• Доступи: хостинг, домен, адмінка Бітрікс24
• Навчання: інструкція з оновлення меню та акцій
• Підтримка: 30 днів після запуску безкоштовно

Етапи роботи та терміни

Усього: 6–8 тижнів. Основна затримка — зазвичай контент: фотосесія страв та узгодження текстів.

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

Як правильно проектувати інфоблоки?

Ми бачимо десятки проєктів, де неправильна структура інфоблоків перетворює сайт на гальмо. Типовий сценарій: замовник просить «каталог товарів». Розробник створює один інфоблок catalog, закидає туди 15 властивостей. Через півроку — 40 властивостей, 8 з яких використовуються лише для однієї категорії. Фільтр гальмує, таблиця b_iblock_element_property розрослася до мільйонів рядків, CIBlockElement::GetList виконується 3 секунди. Наслідки — падіння конверсії, втрата клієнтів, додаткові витрати на оптимізацію. В одному проєкті після рефакторингу каталогу час генерації сторінки знизився з 4,2 до 0,8 секунди, а вартість підтримки значно скоротилася — за рахунок усунення надлишкових запитів та агентів.

Наш підхід: проектуємо інфоблоки до першого рядка коду. Окремі інфоблоки під сутності (товари, категорії, бренди), властивості-довідники через HL-блоки, торгові пропозиції для SKU. Це закладає продуктивність на роки вперед. Якщо хочете отримати попередній аудит вашої схеми інфоблоків — зв'яжіться з нами, розберемо типові помилки та надамо рекомендації.

Чому 1С-Бітрікс вигідніший за альтернативи?

Вибір CMS диктується не уподобаннями, а бізнес-завданнями. Ось ключові аргументи:

• Нативний обмін з 1С — модуль catalog.import.1c забезпечує двосторонній обмін товарами, цінами, залишками та замовленнями через CommerceML. Без сторонніх модулів. Це в 5 разів швидше, ніж розробка власного обміну на OpenCart або WordPress. Економія на інтеграції — до 200 000 грн порівняно з кастомними рішеннями.
• Проактивний захист — модуль security включає WAF, контроль цілісності файлів, захист від SQL-ін'єкцій, двофакторну автентифікацію. Для проєктів з вимогами ФСТЭК — сертифіковане рішення (згідно з Wikipedia, це стандарт для корпоративних систем).
• Модульна архітектура — підключаємо лише потрібні модулі: iblock, catalog, sale, search. Менше модулів — менше запитів до БД на кожен хіт.
• Регулярні патчі — вендор випускає security-патчі, закриваючи вразливості швидше, ніж open-source проєкти (середній час виправлення CVE — 2 тижні). Офіційна документація по модулях доступна на сайті розробника.

Що дають HL-блоки і як ми прискорюємо каталог

Highload-блоки — це альтернатива розширеним властивостям інфоблоків, коли список значень може зростати до тисяч записів. Типовий приклад: виробники, країни, кольори. Якщо зберігати їх як властивості-списки в інфоблоці, кожна фільтрація викликає повне сканування таблиці b_iblock_property_enum. З HL-блоками вибірка йде по індексу — час відповіді фільтра знижується з 1–2 секунд до 50 мс. Продуктивність HL-блоків у 8 разів вища за властивості-списки інфоблоків. Ми використовуємо HLB компонент і кастомні запити через Bitrix\Highloadblock\DataManager. Це особливо критично для каталогів з 100 000+ товарами.

З нашої практики — проєкт інтернет-магазину з 500 000 товарів. Стандартний фільтр по бренду виконувався 4 секунди. Сервер не витримував навантаження в 50 одночасних запитів — сторінки падали. Ми перевели довідник брендів у HL-блок, додали теговане кешування на 15 хвилин і налаштували агент для скидання кешу при зміні. Після доопрацювання час фільтрації склав 120 мс, середній LCP сторінки — 1,8 секунди. Проєкт працює стабільно без збоїв.

Що входить у розробку сайту на 1С-Бітрікс

Кожен проєкт включає повний комплект документації та артефактів, що виключає втрату знань після передачі.

• Технічне завдання — user stories, діаграми інфоблоків, схеми інтеграцій.
• Вихідний код у Git — з історією комітів, тегами релізів, правилами гілкування.
• Адміністративна документація — опис кастомних компонентів, інструкції з розгортання, перелік агентів і подій.
• Навчання співробітників — до 3 годин вебінару: панель управління, робота з замовленнями, налаштування цін. Записуємо, щоб можна було переглянути.
• Доступ до staging на час розробки — тестуєте самостійно до деплою на продуктив.
• Гарантійна підтримка — виправлення помилок коду протягом 30 днів після запуску. Післягарантійні абонентські пакети з SLA (реакція 2 години, рішення 8 годин).

Наш процес і технології

Стек: верстка mobile-first, тестуємо на фізичних пристроях (iPhone, iPad, Android). Використовуємо BrowserStack для Safari на iOS. Продуктивність — LCP < 2,5 с, FID < 100 мс, CLS < 0,1. Включаємо композитний сайт (composite), CDN, теговане кешування, WebP/AVIF, lazy loading. SEO — Schema.org через JSON-LD, автогенерація sitemap.xml модулем seo, canonical і hreflang для мультимовних версій. robots.txt закриваємо /bitrix/ від індексації. CI/CD — Git, автодеплой через GitLab CI, staging. Міграції бази — модуль sprint.migration з версіонуванням.

Процес роботи:

1. Аналітика — вивчаємо конкурентів, збираємо вимоги, малюємо прототипи в Figma. На виході — ТЗ з user stories.
2. Дизайн — UI/UX з дизайн-системою. Компоненти перевикористовуються.
3. Розробка — пишемо компоненти з кастомними шаблонами в local/templates/. Бізнес-логіку виносимо в модулі local/modules/.
4. Тестування — функціональне, кросбраузерне, навантажувальне (до 1000 запитів). Критичні баги виправляємо до запуску.
5. Запуск — деплой на прод, моніторинг через UptimeRobot, алерти в Telegram. Усуваємо перші 48 годин.

Інтеграції, мультимовність і редизайн

• Повна локалізація через мовні файли lang/ і механізм SITE_ID. hreflang для кожної версії. Регіональні версії з різними цінами та контентом — визначення за IP (main.geo) або ручний вибір. Мультидоменність — єдине управління кількома доменами.

• Редизайн без втрати позицій: аудит продуктивності (PageSpeed, WebPageTest), SEO (Screaming Frog). Новий шаблон у local/templates/ із збереженням URL-структури. 301-редиректи лише якщо URL змінюється суттєво. Оновлення ядра, перехід на D7 ORM, реструктуризація інфоблоків, міграція через sprint.migration з Git.

Гарантія та підтримка

Ми працюємо з 1С-Бітрікс 12+ років, реалізували 500+ проєктів. У штаті сертифіковані розробники. Фіксована вартість у договорі — без сюрпризів. Гарантійний період покриває помилки коду. Після — абонентські пакети з SLA (час реакції — 2 години, рішення — 8 годин). Моніторинг доступності 24/7, алерти в Telegram. За потреби отримайте попередній аудит — зв'яжіться з нами через форму на сайті або напишіть у чат, відповімо протягом години. Замовте розробку під ключ — ми спроєктуємо інфоблоки, інтегруємо 1С і розженимо каталог. Якщо вже є сайт на іншій CMS — замовте аудит продуктивності та міграцію на Бітрікс.