Розробка сайту клінінгової компанії на 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-запитом. Візуально калькулятор відрисовується відразу з плейсхолдерами, тарифи підставляються після завантаження.

Етапи розробки