Розробка сайту будівельної компанії на 1С-Бітрікс

Розробка сайту будівельної компанії на 1С-Бітрікс

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

Каталог послуг: структура інфоблоків

Послуги будівельної компанії мають ієрархію: напрямок (житлове будівництво, комерційне, промислове, ремонт та реконструкція) → конкретна послуга (будівництво котеджу, зведення каркасної будівлі, капітальний ремонт офісу). Кожна послуга має набір параметрів, які клієнт хоче бачити до дзвінка.

Інфоблок SERVICES з розділами за категоріями:

• Житлове будівництво — котеджі, таунхауси, малоповерхові будинки
• Комерційне будівництво — офісні будівлі, торговельні центри, склади
• Промислове будівництво — виробничі цехи, ангари
• Ремонт та реконструкція — капітальний ремонт, реставрація фасадів, перепланування

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

Властивість CLIENT_TYPE критична для фільтрації: приватний клієнт не хоче бачити «проєктування промислових об'єктів», а тендерний менеджер — «ремонт ванної під ключ». Фільтрація через bitrix:catalog.smart_filter з параметром FILTER_NAME=arrServiceFilter та кастомним шаблоном, що показує перемикач «Для дому / Для бізнесу» замість стандартного чекбоксу.

Портфоліо виконаних проєктів

Портфоліо — окремий інфоблок PORTFOLIO, а не розділ в послугах. Причина: у проєкту своя структура даних, яка не перетинається з послугою. Проєкт — це конкретний об'єкт з адресою, замовником, термінами, площею. Послуга — це опис можливості.

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

Прив'язка SERVICE_LINK — ключовий зв'язок. На сторінці послуги «Будівництво котеджів» автоматично підтягуються проєкти через CIBlockElement::GetList з фільтром ['PROPERTY_SERVICE_LINK' => $serviceId]. На карті портфоліо — маркери з кластеризацією через ymaps.Clusterer, при натисканні на маркер — спливаюче вікно з фото «після», площею та посиланням на повну картку проєкту.

Порівняння «до/після» на картці проєкту реалізується JavaScript-компонентом: два зображення в контейнері з overflow: hidden, одне обрізається через clip-path або абсолютне позиціонування. Обробник mousedown/touchstart на роздільнику переміщує межу обрізки.

Калькулятор вартості: детальний розбір

Калькулятор — найбільш конверсійний елемент сайту будівельної компанії. Відвідувач не хоче телефонувати, щоб дізнатися порядок цифр. Він хоче рухати повзунки і бачити, як змінюється підсумок. Багатокрокова форма з AJAX-розрахунком — правильний підхід.

Архітектура калькулятора. Чотири кроки:

1. Тип робіт — вибір зі списку: нове будівництво, капітальний ремонт, реконструкція, оздоблення
2. Параметри об'єкта — площа (повзунок + ручне введення), поверховість, тип фундаменту (для нового будівництва), поточний стан (для ремонту)
3. Матеріали — готові набори: економ, стандарт, преміум; або ручний вибір за категоріями (стіни, покрівля, оздоблення)
4. Результат — діапазон вартості, орієнтовні терміни, кнопка «Отримати точний кошторис»

Зберігання коефіцієнтів. Базові ставки та множники зберігаються в Highload-блоці CALC_RATES:

Менеджер оновлює коефіцієнти через адміністративний інтерфейс Highload-блоку без участі розробника. Новий тип робіт — новий запис у блоці, калькулятор підхоплює автоматично.

Серверна частина. Кастомний компонент project:calc.estimate з AJAX-контролером. Бітрікс надає механізм AJAX через Bitrix\Main\Engine\Controller:

namespace Project\Component;

use Bitrix\Main\Engine\Controller;
use Bitrix\Main\Engine\ActionFilter;

class CalcEstimateController extends Controller
{
    public function configureActions(): array
    {
        return [
            'calculate' => [
                'prefilters' => [
                    new ActionFilter\HttpMethod([ActionFilter\HttpMethod::METHOD_POST]),
                    new ActionFilter\Csrf(),
                ],
            ],
        ];
    }

    public function calculateAction(
        string $workType,
        float $area,
        int $floors,
        string $materialClass,
        string $foundation = ''
    ): array {
        $rates = HighloadManager::getRow('CALC_RATES', [
            'UF_WORK_TYPE' => $workType,
            'UF_MATERIAL_CLASS' => $materialClass,
        ]);

        if (!$rates) {
            throw new ArgumentException('Unknown combination');
        }

        $base = $rates['UF_BASE_RATE'] * $area;
        $floorMultiplier = $floors > 1
            ? pow($rates['UF_FLOOR_COEFF'], $floors - 1)
            : 1.0;

        $foundationMultiplier = 1.0;
        if ($foundation && $workType === 'new_build') {
            $foundationMultiplier = $rates['UF_FOUNDATION_COEFF'];
        }

        $total = $base * $floorMultiplier * $foundationMultiplier;

        return [
            'estimate_min' => round($total * 0.85),
            'estimate_max' => round($total * 1.15),
            'timeline_weeks' => $this->estimateTimeline($workType, $area),
            'breakdown' => [
                'base' => round($base),
                'floor_adjustment' => round($base * ($floorMultiplier - 1)),
                'foundation_adjustment' => round(
                    $base * $floorMultiplier * ($foundationMultiplier - 1)
                ),
            ],
        ];
    }
}

Фронтенд калькулятора. Кожен крок — окремий екран з анімацією переходу. На кроках 1-3 дані накопичуються в об'єкті стану. На кроці 2 — AJAX-запит для динамічного оновлення доступних опцій (обрано «нове будівництво» — з'являється вибір фундаменту; обрано «ремонт» — з'являється вибір поточного стану). На кроці 4 — AJAX-запит calculateAction з повним набором параметрів.

Результат відображається як діапазон: «від 1 440 000 до 1 960 000 грн». Не точна цифра — це важливо юридично та комерційно. Нижче — розбивка: базова вартість, надбавка за поверховість, надбавка за тип фундаменту. Клієнт бачить, з чого складається оцінка, і розуміє, де можна заощадити.

Збереження розрахунків. Кожен розрахунок записується в Highload-блок CALC_RESULTS з полями: вхідні параметри, результат, дата, IP, UTM-мітки. Це дає аналітику: які типи робіт рахують найчастіше, який середній запитуваний бюджет, на якому кроці користувачі йдуть (якщо крок 4 не досягнуто — записуємо по події beforeunload). UTM-мітки дозволяють прив'язати розрахунок до рекламної кампанії.

Кнопка «Отримати точний кошторис» відкриває форму з полями: ім'я, телефон, email, коментар. При відправці — створюється лід у CRM (якщо підключено Бітрікс24) або надсилається email через CEvent::Send() з типом поштової події CALC_REQUEST. В тіло листа автоматично підставляються всі параметри розрахунку — менеджеру не потрібно перепитувати.

Тендерна система для B2B

Корпоративний замовник приходить не з питанням «скільки коштує», а з технічним завданням на 40 сторінок. Йому потрібна форма подачі заявки із завантаженням файлів.

Форма тендерної заявки — кастомний компонент на базі bitrix:form.result.new або окремий контролер. Поля: назва компанії, код ЄДРПОУ, контактна особа, email, телефон, опис проєкту (textarea), файли ТЗ (множинне завантаження, до 5 файлів, формати PDF/DOC/DWG/ZIP, максимум 50MB сумарно). Валідація на фронті — перевірка розширень та розміру до відправки. На бекенді — повторна перевірка через CFile::CheckFile().

Завантажені файли зберігаються в інфоблок TENDER_REQUESTS як елемент з властивостями-файлами. Поштова подія TENDER_NEW_REQUEST розсилає сповіщення відповідальному менеджеру. Автовідповідь заявнику — окрема поштова подія TENDER_CONFIRM з текстом «Вашу заявку #ID прийнято, очікуйте відповідь протягом 2 робочих днів».

Сертифікати, ліцензії, допуски

Для будівельної компанії розділ з ліцензіями — не декорація. Членство в СРО, сертифікати ISO, ліцензії на проєктування — все це перевіряє замовник перед підписанням договору. Інфоблок CERTIFICATES з мінімумом полів: назва документа, номер, дата видачі, термін дії, скан (файл). На фронті — галерея з можливістю перегляду скану в повному розмірі через lightbox. Термін дії відстежується агентом (CAgent): за 30 днів до закінчення — сповіщення адміністратору.

Команда та спеціалізації

Інфоблок TEAM з прив'язкою до послуг через множинну властивість SPECIALIZATION (тип E, прив'язка до інфоблоку SERVICES). На сторінці співробітника — його проєкти з портфоліо (зв'язок через PROPERTY_MANAGER_ID в інфоблоці PORTFOLIO). На сторінці послуги — блок «Наші фахівці» з автоматичною підбіркою за прив'язкою.

Моніторинг ходу будівництва

Клієнтський портал для діючих замовників — окремий розділ за авторизацією. Інфоблок CONSTRUCTION_PROGRESS з елементами-звітами: дата, опис етапу, фотографії, відсоток виконання. Прив'язка до проєкту через PROPERTY_PROJECT_ID, прив'язка до клієнта через PROPERTY_CLIENT_USER_ID. Авторизований клієнт бачить лише свої проєкти — фільтр ['PROPERTY_CLIENT_USER_ID' => $USER->GetID()].

Фотозвіти завантажує виконроб через спрощену форму в адміністративній частині або через мобільну версію фронтенду з bitrix:iblock.element.add.form. Сповіщення клієнту при додаванні нового звіту — через поштову подію PROGRESS_UPDATE.

Інтеграція з 1С для обліку проєктів

Модуль sale не потрібен — будівельна компанія не продає товари через кошик. Але обмін з 1С:Управління будівельною організацією актуальний: довідники контрагентів, статуси договорів, акти виконаних робіт. Інтеграція через REST API 1С або проміжну базу даних. Дані з 1С підтягуються в Highload-блоки Бітрікса через cron-задачу, оновлюються щогодини.

SEO: запити «тип робіт + місто»

Цільові запити — «будівництво котеджів Київ», «капітальний ремонт офісу Львів», «промислове будівництво Україна». Шаблони SEO через налаштування інфоблоку послуг:

• ELEMENT_META_TITLE = #ELEMENT_NAME# у {місто} | {компанія}
• SECTION_META_TITLE = #SECTION_NAME# — послуги будівельної компанії | {компанія}

Для геозалежних посадочних сторінок — окремі розділи або landing-компонент з динамічною підстановкою міста з Highload-блоку «Регіони роботи». Schema.org мікророзмітка GeneralContractor з areaServed та Service:

{
  "@context": "https://schema.org",
  "@type": "GeneralContractor",
  "name": "Назва компанії",
  "areaServed": {"@type": "City", "name": "Київ"},
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Послуги",
    "itemListElement": [
      {"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Будівництво котеджів"}}
    ]
  }
}

Географія робіт

Окрема сторінка з картою виконаних проєктів. Маркери завантажуються з інфоблоку PORTFOLIO через AJAX-запит, який повертає JSON: [{id, lat, lng, title, photo, area}]. Кластеризація через ymaps.Clusterer — при великій кількості проєктів у одному регіоні маркери групуються. При натисканні на маркер — балун з фото, назвою та посиланням на картку проєкту.

Фільтрація на карті за типом робіт — перемикач категорій, який перезавантажує маркери через AJAX з параметром SERVICE_LINK. Це дозволяє показати, наприклад, тільки промислові об'єкти або тільки житлові.

Етапи та терміни

1. Аналітика (1-2 тижні) — структура каталогу послуг, логіка калькулятора, прототипи
2. Дизайн (2-3 тижні) — головна, каталог, картка проєкту, калькулятор, мобільна версія
3. Розробка ядра (3-5 тижнів) — інфоблоки, шаблони, фільтрація, портфоліо з картою
4. Калькулятор та форми (2-3 тижні) — багатокроковий розрахунок, тендерна форма, клієнтський портал
5. Інтеграції (1-3 тижні) — 1С, CRM, поштові події
6. Тестування та запуск (1-2 тижні) — кросбраузерність, мобільні пристрої, SEO-аудит

Терміни не включають наповнення портфоліо та налаштування коефіцієнтів калькулятора — це робить замовник паралельно з розробкою.