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

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

Сайт кафе решает три задачи: показать меню, привести гостя и принять бронь. Звучит просто, но 90% посетителей откроют его с телефона, стоя на улице или листая ленту. Если страница грузится больше трёх секунд или меню нельзя прочитать без зума — гость уйдёт к конкуренту через дорогу. На 1С-Битрикс кафе получает управляемый каталог меню через инфоблоки, бронирование через веб-формы с передачей в CRM и техническую основу, которую администратор обновляет без разработчика.

Меню как инфоблок

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

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

Свойства элемента:

• Название — обязательное, выводится на карточке
• Описание — состав и особенности
• Вес/объём — строковое свойство (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:), при нажатии с мобильного — вызов.

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С-Битрикс:

Штатное масштабирование через 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 < 2 секунд, CLS < 0.1, FID < 100 мс. Проверяется через PageSpeed Insights и реальные данные из Chrome UX Report после накопления статистики.

Этапы работы

Итого: 6–8 недель. Основная задержка — обычно контент: фотосъёмка блюд и согласование текстов.