Разработка сайта услуг на 1С-Битрикс

Разработка сайта услуг на 1С-Битрикс

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

Структура инфоблоков для каталога услуг

Услуги — это инфоблок с типом services. Разделы инфоблока — категории: «Юридические услуги», «Бухгалтерский учёт», «Аудит». Элементы — конкретные услуги: «Регистрация ООО», «Ликвидация ИП», «Налоговый аудит».

Типовые свойства элемента:

Разделы инфоблока тоже получают пользовательские свойства через UF-поля: UF_SECTION_ICON (SVG-иконка категории), UF_SECTION_DESCRIPTION (развёрнутое описание для SEO). Стандартное поле DESCRIPTION раздела слишком ограничено — нет HTML, нет визуального редактора в версиях до 23.x.

Важный момент — вложенность разделов. Для сайта юридической компании достаточно одного уровня: категория → услуга. Для медицинского центра с десятью направлениями и сотней процедур нужна двухуровневая структура: направление → подкатегория → услуга. Битрикс поддерживает неограниченную вложенность разделов, но компонент catalog.section.list требует ручной настройки DEPTH_LEVEL и кастомного шаблона для корректного отображения.

Карточка услуги: от шаблона компонента до микроразметки

Карточка услуги выводится компонентом bitrix:news.detail с кастомным шаблоном. Не catalog.element — модуль catalog здесь избыточен, он тянет за собой торговые предложения, типы цен, складской учёт.

В result_modifier.php карточки подгружаем связанные данные:

• Специалисты — CIBlockElement::GetList() по ID из свойства SPECIALISTS, с выборкой фото, должности, стажа. Результат кешируется тегированным кешем с тегом iblock_id_XX
• Похожие услуги — из того же раздела, исключая текущую, сортировка по SORT. Лимит 3-4 карточки
• Портфолио — кейсы, привязанные к этой услуге через свойство-привязку в инфоблоке «Портфолио»

Микроразметка Service по schema.org — в шаблоне компонента. Минимальный набор: name, description, provider (организация), areaServed. Если указан диапазон цен — добавляем offers с priceSpecification. Google Search Console покажет, распознал ли робот разметку, через 2-3 дня после индексации.

Онлайн-запись и формы заявок

Два подхода, принципиально разных по архитектуре.

Штатный модуль form (веб-формы). Форма создаётся в админке, поля настраиваются визуально. Компонент bitrix:form.result.new выводит форму на странице. Результаты хранятся в таблицах b_form_*. Плюсы: быстрая настройка, экспорт в CSV, уведомления на email. Минусы: нет привязки к конкретной услуге без дополнительного скрытого поля, нет выбора даты/времени «из коробки», нет интеграции с календарём специалиста.

Кастомная форма записи через инфоблок + CRM. Создаём инфоблок «Записи на приём» с полями: услуга (привязка), специалист (привязка), дата, время, имя клиента, телефон, статус. Форма на фронте — React-компонент или кастомный шаблон с AJAX-отправкой через bitrix:main.ajax. При сохранении элемента обработчик OnAfterIBlockElementAdd создаёт лид в Битрикс24 через REST API:

CRest::call('crm.lead.add', [
    'fields' => [
        'TITLE' => 'Запись: ' . $serviceName,
        'NAME' => $clientName,
        'PHONE' => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']],
        'SOURCE_ID' => 'WEB',
        'UF_CRM_SERVICE_ID' => $serviceId,
    ]
]);

Для полноценного календаря записи — интеграция с модулем calendar Битрикс24. Через REST API (calendar.event.add) создаём событие в календаре специалиста. На фронте показываем свободные слоты, запрашивая занятость через calendar.event.get с фильтром по дате и сотруднику. Это требует коробочного Битрикс24 или облачного с подпиской.

Портфолио и кейсы

Отдельный инфоблок portfolio с типом контента «Портфолио». Элемент — один кейс. Свойства:

• CLIENT — название клиента (строка или привязка к инфоблоку «Клиенты»)
• SERVICES — привязка к инфоблокам услуг (множественная)
• GALLERY — файл (множественный), фотогалерея проекта
• RESULT_TEXT — HTML, описание результата
• DURATION_PROJECT — строка, сроки выполнения
• TESTIMONIAL — HTML, отзыв клиента

Компонент bitrix:news.list с кастомным шаблоном — вывод сеткой или каруселью. Фильтрация по услуге: на странице карточки услуги подгружаем кейсы с фильтром PROPERTY_SERVICES = ID текущей услуги. На общей странице портфолио — фильтр по разделам услуг через AJAX-подгрузку.

Галерея в карточке кейса — через bitrix:photo.section или кастомный lightbox. Изображения обрабатываются через CFile::ResizeImageGet() — генерируем превью 400x300 для сетки и полноразмерные для просмотра. WebP-конвертация через параметр BX_RESIZE_IMAGE_PROPORTIONAL_ALT.

Команда и привязка специалистов к услугам

Инфоблок «Специалисты» — элементы с полями: фото, ФИО, должность, стаж, описание, сертификаты (множественный файл). Привязка к услугам — двусторонняя: в карточке специалиста показываем его услуги, в карточке услуги — специалистов.

Реализация двусторонней привязки: свойство SPECIALISTS в инфоблоке услуг (привязка к элементам инфоблока специалистов). Обратная выборка — CIBlockElement::GetList() с фильтром PROPERTY_SPECIALISTS = ID специалиста. Кеширование обязательно — без него на странице «Команда» с 20 специалистами и их услугами будет 21 запрос к базе.

Для медицинских и бьюти-сайтов критична страница специалиста с расписанием. Расписание — либо из Битрикс24 (REST API calendar.event.get), либо из кастомного инфоблока «Расписание» с элементами-слотами. Второй вариант проще в реализации, но требует ручного обновления расписания менеджером.

SEO для каталога услуг

У каждой услуги — уникальные title, description, keywords. Шаблоны META задаются на уровне инфоблока через «SEO → Шаблоны META для элементов»:

• {=this.Name} — название услуги
• {=this.PreviewText} — анонс
• {=parent.Name} — название раздела (категории)
• {=iblock.Name} — название инфоблока

Шаблон title для услуги: {=this.Name} — {=parent.Name} | Компания. Для разделов: {=this.Name} — каталог услуг | Компания. Переопределение для конкретного элемента — через поля ELEMENT_META_TITLE, ELEMENT_META_DESCRIPTION в детальном описании элемента.

ЧПУ — через настройку инфоблока: URL_SECTION = /services/#SECTION_CODE#/, URL_DETAIL = /services/#SECTION_CODE#/#ELEMENT_CODE#/. Символьный код генерируется из названия транслитерацией. Проверяем уникальность — дубли кодов ломают маршрутизацию.

Хлебные крошки — компонент bitrix:breadcrumb. Автоматически строит цепочку по структуре разделов инфоблока. Для JSON-LD разметки BreadcrumbList — добавляем скрипт в result_modifier.php компонента.

Калькулятор стоимости

Для сайтов ремонтных, строительных, клининговых компаний калькулятор — основной инструмент лидогенерации. Два подхода:

Фронтовый калькулятор — React/Vue-компонент, логика расчёта на клиенте. Параметры (цены за единицу, коэффициенты) хранятся в Highload-блоке и подгружаются через REST API или AJAX-контроллер. Результат расчёта отправляется как лид в CRM. Плюс: мгновенный отклик. Минус: клиент видит формулу расчёта в исходном коде.

Серверный калькулятор — каждое изменение параметра отправляет запрос на сервер. Формула скрыта. Подходит для сложных расчётов с зависимостями (площадь помещения → тип покрытия → количество материала → стоимость работ). Реализация — кастомный AJAX-контроллер через Bitrix\Main\Engine\Controller.

Многофилиальность

Для компании с офисами в нескольких городах — инфоблок «Филиалы»: адрес, телефон, координаты, график работы, фото. Привязка услуг к филиалам через свойство BRANCHES — не все услуги доступны во всех филиалах.

На фронте — определение города по IP через bitrix:main.site.selector или ipgeobase. Фильтрация услуг по выбранному филиалу: в компоненте news.list добавляем фильтр PROPERTY_BRANCHES = ID текущего филиала. Город сохраняется в cookie или сессии.

Карта филиалов — bitrix:map.yandex.view для Яндекс.Карт или кастомная интеграция с Google Maps API. Координаты хранятся в свойстве типа «Привязка к карте» (MAP в Битрикс).

Интеграция с CRM

Каждая форма на сайте — потенциальный лид. Интеграция с Битрикс24 CRM через REST API или модуль crm:

• Форма заявки → crm.lead.add с источником WEB, привязкой к услуге через UF-поле
• Онлайн-запись → crm.lead.add + calendar.event.add
• Калькулятор → crm.lead.add с расчётом в комментарии
• Обратный звонок → crm.lead.add с пометкой «Перезвонить»

UTM-метки из URL передаются в лид через поля UTM_SOURCE, UTM_MEDIUM, UTM_CAMPAIGN. Это позволяет отслеживать, какой рекламный канал привёл клиента.

Если Битрикс24 облачный — авторизация через OAuth 2.0, webhook или входящий вебхук. Коробочный — через модуль crm, прямой доступ к API на том же сервере.

Этапы разработки

1. Анализ и проектирование (1-2 недели) — аудит текущего сайта (если есть), структура услуг, пользовательские сценарии, прототипы ключевых страниц
2. Дизайн (1-3 недели) — UI-кит, макеты адаптивных страниц, дизайн карточки услуги, формы записи, калькулятора
3. Разработка backend (2-4 недели) — инфоблоки, компоненты, интеграция с CRM, формы, калькулятор
4. Разработка frontend (2-3 недели) — вёрстка шаблонов, интерактивные компоненты, адаптив
5. Контент и SEO (1-2 недели) — наполнение, настройка META-шаблонов, sitemap, robots.txt
6. Тестирование и запуск (1 неделя) — функциональное тестирование, проверка форм, кросс-браузерность

Типичные ошибки на сайтах услуг

• Услуги как страницы, а не элементы инфоблока. Каждая услуга — статическая страница в структуре сайта. Нет фильтрации, нет сортировки, невозможно автоматически построить каталог. Переделка — миграция контента в инфоблок и переписывание URL с 301-редиректами
• Формы без интеграции с CRM. Заявки падают на email и теряются. Менеджер не видит историю коммуникаций с клиентом. Интеграция с CRM занимает 2-3 дня, но окупается через неделю
• Одинаковые META-теги на всех услугах. Google воспринимает это как дублированный контент. Шаблоны META с подстановкой названия услуги и раздела — базовая гигиена, которая часто игнорируется