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

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

Клининговый бизнес конкурирует прежде всего на удобстве заказа. Клиент не хочет звонить, объяснять площадь квартиры, перечислять дополнительные услуги и ждать расчёта. Он хочет зайти на сайт, протыкать параметры в калькуляторе, увидеть сумму и оставить заявку. Сайт клининговой компании на 1С-Битрикс строится вокруг этого калькулятора — остальные разделы поддерживают его, формируя доверие.

Каталог услуг

Инфоблок «Услуги» с разделами:

• Уборка квартир — поддерживающая, генеральная, после ремонта, после переезда
• Уборка офисов — ежедневная, генеральная, разовая
• Мойка окон — стандартные, витражные, мансардные, фасадные (с промышленным альпинизмом)
• Химчистка мебели — диваны, ковры, матрасы, кресла
• Специализированная — уборка после пожара, дезинфекция, уборка коммерческих помещений (склады, торговые залы)

Свойства элемента инфоблока:

На детальной странице — подробное описание, чек-лист работ (что входит / что не входит), фотографии результатов, и встроенный мини-калькулятор, предзаполненный текущей услугой.

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

Калькулятор — главный конверсионный элемент сайта и основная инженерная задача. Он должен работать быстро, наглядно отображать формирование суммы и при этом тянуть тарифы не из захардкоженных констант, а из административной панели.

Хранение тарифов: Highload-блок hl_cleaning_tariffs

Тарифы нелинейны — ставка за м² снижается с ростом площади (дегрессивная шкала). Поэтому используются диапазоны: до 40 м² — одна ставка, 40–80 — другая, 80–150 — третья. Менеджер настраивает это в админке Highload-блока без участия разработчика.

Highload-блок дополнительных услуг (hl_extra_services):

Фронтенд калькулятора:

Пошаговый интерфейс без перезагрузки страницы:

1. Тип помещения — кнопки-переключатели: квартира, дом, офис. Выбор определяет набор последующих полей.
2. Тип уборки — поддерживающая, генеральная, после ремонта. Загружает соответствующие тарифы.
3. Площадь — слайдер + числовое поле. Диапазон зависит от типа помещения (квартира: 20–200 м², офис: 30–1000 м²).
4. Количество комнат и санузлов — для расчёта трудозатрат и дополнительных коэффициентов.
5. Дополнительные параметры — чекбоксы: есть домашние животные, сильное загрязнение, нужна глажка белья.
6. Дополнительные услуги — список с чекбоксами и счётчиками (мытьё окон: 3 шт., мойка люстры: 2 шт.).
7. Дата и время — календарь с выбором удобного слота.

На каждом шаге итоговая сумма пересчитывается в реальном времени. Формула:

Итог = (Площадь × Ставка_за_м²) × Коэфф_загрязнения × Коэфф_животные + Сумма_доп_услуг

Все тарифы и коэффициенты подгружаются одним AJAX-запросом при инициализации калькулятора и кешируются в JavaScript-объекте. Повторные AJAX-запросы не нужны — пересчёт происходит на клиенте. Тарифы обновляются в кеше при изменении Highload-блока (тегированный кеш с тегом cleaning_tariffs).

Результат расчёта отображается в виде детализированной сметы:

Генеральная уборка квартиры 65 м²     — 4 550 руб.
Коэффициент «домашние животные» ×1.15 — +682 руб.
Мытьё окон (4 шт. × 350 руб.)        — 1 400 руб.
Мойка духовки                         — 450 руб.
───────────────────────────────────
Итого:                                  7 082 руб.

Под сметой — кнопка «Оформить заявку». При клике данные калькулятора сериализуются в JSON и отправляются в CRM Битрикса.

Заявка → CRM

При отправке формы создаётся лид в CRM с полями:

• Тип услуги, площадь, доп. услуги — в комментарий лида (структурированный текст)
• Рассчитанная сумма — в поле OPPORTUNITY
• Имя, телефон, email — контактные данные
• Дата и время — в пользовательское поле лида UF_CRM_PREFERRED_DATE
• UTM-метки — автоматически из cookie

Менеджер видит лид с готовой сметой. Не нужно перезванивать, уточнять площадь и считать вручную — всё уже есть. Конверсия из лида в сделку выше, цикл сделки короче.

Альтернативная интеграция — через sale.order.ajax, если компания хочет принимать онлайн-оплату. Тогда калькулятор формирует корзину из основной услуги (товар-услуга в каталоге) и дополнительных позиций, оформляется заказ с оплатой картой.

Отзывы с фото результатов

Инфоблок «Отзывы» с привязкой к услуге. Обязательные свойства: имя клиента, текст, оценка (1–5 звёзд), фото до/после (множественный файл), дата уборки, тип услуги. Модерация — через статус workflow (на модерации → опубликован → отклонён).

Фото до/после отображаются слайдером с разделительной полосой (before/after slider) — пользователь двигает ползунок и видит разницу. Реализация через JavaScript-библиотеку (например, img-comparison-slider), шаблон компонента news.detail подгружает скрипт при наличии фотографий.

Агрегированный рейтинг по каждой услуге рассчитывается кешируемым компонентом и выводится в каталоге. Микроразметка schema.org/AggregateRating на странице услуги.

Программа лояльности

Механика: при первом заказе клиент получает промокод на скидку при повторном обращении. Реализация через модуль купонов sale:

• После завершения заказа (статус «Выполнен») — обработчик OnSaleOrderSaved генерирует персональный купон с типом «Процентная скидка» и ограничением «одноразовый».
• Купон отправляется клиенту по email и SMS.
• При накоплении 5+ заказов — клиент переводится в группу LOYAL_CUSTOMER с постоянной скидкой через правило корзины.

Баланс бонусов и история заказов доступны в личном кабинете. Компонент sale.personal.section с доработанным шаблоном.

Технические нюансы

Геолокация: клининговая компания работает в определённом городе или регионе. На главной — автоопределение города по IP (модуль sale + база GeoIP). Если город вне зоны обслуживания — показывается уведомление.

Мобильная версия: более 70% заказов клининга приходят с мобильных устройств. Калькулятор должен быть полностью адаптивным — слайдер площади, чекбоксы дополнительных услуг, итоговая сумма — всё должно работать на экране 360px без горизонтальной прокрутки.

Скорость загрузки: калькулятор не должен блокировать рендеринг страницы. Скрипт загружается асинхронно (defer), тарифы — отложенным AJAX-запросом. Визуально калькулятор отрисовывается сразу с плейсхолдерами, тарифы подставляются после загрузки.

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