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

Розробка сайту кафе на 1С-Bitrix

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

Меню як інфоблок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Відгуки

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

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

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

Schema.org Restaurant

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

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

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

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

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

Проблема номер один — зображення. Фотографії страв та інтер'єру важкі: 2–5 МБ з камери фотографа. На мобільному екрані шириною 375px грузити картинку 2400px — розточительно.

Рішення на рівні 1С-Bitrix:

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

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

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

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

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

Етапи роботи

Разом: 6–8 тижнів. Основна затримка — зазвичай контент: фотозйомка страв та согласование текстів.