Розробка сайту забудовника на 1С-Бітрікс

Розробка сайту забудовника на 1С-Бітрікс

Сайт забудовника — це не агрегатор нерухомості й не дошка оголошень. Забудовник продає конкретні квартири в конкретних корпусах, і покупець приймає рішення не за фотографіями чужих інтер'єрів, а за плануванням, краєвидом з вікна та стадією будівництва. Середній цикл угоди — 2-4 місяці. За цей час відвідувач повертається на сайт 8-15 разів: порівнює планування, стежить за ходом будівництва, перераховує іпотеку. Якщо сайт не відповідає на ці задачі — клієнт іде до конкурента, в якого шахматка працює.

Ключова технічна особливість сайту забудовника — інтерактивний поповерховий план (шахматка). Це не просто таблиця «поверх × секція». Це SVG-схема, на якій кожна квартира клікабельна, пофарбована за статусом і пов'язана з реальними даними з інфоблоку. Саме шахматка відрізняє сайт забудовника від шаблонного каталогу.

Архітектура даних: ЖК → корпус → квартира

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

Інфоблок «Житлові комплекси» (або Highload-блок, якщо комплексів менше 50) — батьківська сутність. Властивості:

Розділи інфоблоку — корпуси та секції. Кожен ЖК — розділ першого рівня. Корпуси — розділи другого рівня всередині ЖК. Якщо в корпусі кілька секцій (під'їздів) — розділи третього рівня. Така вкладеність дозволяє використовувати штатну навігацію bitrix:catalog.section.list без кастомних запитів.

Елементи інфоблоку — квартири. Кожна квартира прив'язана до розділу-корпусу (або розділу-секції). Мінімальний набір властивостей:

Властивість LAYOUT_SVG_ID — це зв'язок між даними в базі та SVG-файлом шахматки. Про це детально нижче.

Інтерактивна шахматка: глибоке занурення

Шахматка — візуальне представлення поверхів та квартир у розрізі корпусу. Користувач бачить фасад будинку або схему поверху, натискає на квартиру, отримує картку з ціною, площею та плануванням. Квартири пофарбовані за статусом: зелений — вільна, жовтий — заброньована, сірий — продана. Це головний конверсійний інструмент: забудовник із робочою шахматкою отримує на 30-40% більше заявок, ніж забудовник із табличним каталогом.

Підготовка SVG-файлу. Дизайнер малює фасад або поповерховий план в Adobe Illustrator / Figma і експортує в SVG. Кожна квартира — окремий <path>, <polygon> або <rect> з атрибутом data-apartment-id, який збігається зі значенням властивості LAYOUT_SVG_ID елементу інфоблоку. Приклад фрагменту SVG:

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
  <!-- Поверх 5, секція 1 -->
  <g data-floor="5" data-section="1">
    <path data-apartment-id="K1-5-01"
          d="M100,200 L250,200 L250,350 L100,350 Z"
          class="apartment" />
    <path data-apartment-id="K1-5-02"
          d="M260,200 L450,200 L450,350 L260,350 Z"
          class="apartment" />
    <path data-apartment-id="K1-5-03"
          d="M460,200 L600,200 L600,350 L460,350 Z"
          class="apartment" />
  </g>
  <!-- Сходова клітка, ліфт — без data-apartment-id -->
  <rect x="610" y="200" width="40" height="150" class="stairs" />
</svg>

Правила іменування data-apartment-id: корпус-поверх-номер (K1-5-01). Формат фіксується в технічному завданні й не змінюється після початку розробки. Якщо дизайнер надішле SVG без атрибутів — розробник витратить 2-3 дні на розмітку вручну. Тому шаблон SVG з прикладами атрибутів передається дизайнеру до початку роботи.

Inline SVG, а не <img>. SVG підключається не через тег <img> і не через <object>, а інлайниться прямо в HTML сторінки. Причина — до вмісту <img src="plan.svg"> неможливо дістатися з JavaScript (крос-доменна політика та відсутність DOM-доступу). Inline SVG стає частиною DOM сторінки, і кожен <path data-apartment-id="..."> доступний через document.querySelector.

На практиці: Бітрікс читає SVG-файл із властивості розділу (корпусу) і виводить його вміст через file_get_contents() прямо в шаблон компонента:

// template.php компонента шахматки
$svgPath = CFile::GetPath($arResult['SECTION']['UF_FLOOR_PLAN_SVG']);
$svgContent = file_get_contents($_SERVER['DOCUMENT_ROOT'] . $svgPath);
$svgContent = preg_replace('/<\?xml[^?]*\?>/', '', $svgContent);
echo '<div class="chess-board">' . $svgContent . '</div>';

JavaScript: зв'язуємо SVG з даними квартир. При завантаженні сторінки фронтенд отримує JSON-масив квартир поточного корпусу через AJAX-запит або інлайн <script> з даними з CIBlockElement::GetList. Структура JSON:

const apartments = [
  {
    svgId: "K1-5-01",
    id: 4521,
    rooms: 2,
    area: 58.3,
    floor: 5,
    price: 2800000,
    pricePerM2: 48000,
    status: "available",   // available | reserved | sold
    layoutImg: "/upload/layouts/k1-5-01.jpg",
    url: "/zhk-sonyachnyj/korpus-1/kvartira-4521/"
  },
  // ...
];

Ініціалізація шахматки:

function initChessBoard(apartments) {
    const svgContainer = document.querySelector('.chess-board svg');
    if (!svgContainer) return;

    const statusColors = {
        available: '#4CAF50',
        reserved:  '#FFC107',
        sold:      '#9E9E9E'
    };

    apartments.forEach(apt => {
        const el = svgContainer.querySelector(
            `[data-apartment-id="${apt.svgId}"]`
        );
        if (!el) return;

        el.style.fill = statusColors[apt.status];
        el.style.cursor = apt.status === 'sold' ? 'default' : 'pointer';
        el.style.transition = 'fill 0.2s, opacity 0.2s';

        // Hover — підсвітка
        el.addEventListener('mouseenter', () => {
            if (apt.status === 'sold') return;
            el.style.opacity = '0.7';
            showTooltip(el, apt);
        });
        el.addEventListener('mouseleave', () => {
            el.style.opacity = '1';
            hideTooltip();
        });

        // Клік — картка квартири
        el.addEventListener('click', () => {
            if (apt.status === 'sold') return;
            showApartmentCard(apt);
        });
    });
}

Tooltip при наведенні. При hover над квартирою з'являється спливаюча підказка з короткою інформацією: кімнати, площа, ціна. Позиція tooltip обчислюється через getBoundingClientRect() елемента SVG:

function showTooltip(svgElement, apt) {
    const tooltip = document.getElementById('chess-tooltip');
    const rect = svgElement.getBoundingClientRect();

    tooltip.innerHTML = `
        <div class="chess-tooltip__rooms">${apt.rooms}-кімн.</div>
        <div class="chess-tooltip__area">${apt.area} м²</div>
        <div class="chess-tooltip__price">
            ${apt.price.toLocaleString('uk-UA')} ₴
        </div>
    `;
    tooltip.style.left = `${rect.left + rect.width / 2}px`;
    tooltip.style.top = `${rect.top - 10}px`;
    tooltip.style.display = 'block';
}

Картка по кліку. При натисканні на вільну квартиру відкривається бічна панель або модальне вікно з повною інформацією: планування, площа по кімнатах, поверх, вид з вікна, оздоблення, кнопки «Забронювати» і «Завантажити PDF». Дані вже завантажені в масив apartments — додатковий AJAX-запит не потрібен.

Фільтрація прямо на шахматці. Над SVG-схемою — панель фільтрів: кількість кімнат (чекбокси), діапазон площі, діапазон ціни. При зміні фільтра JavaScript приховує невідповідні квартири через зменшення opacity до 0.1 і вимкнення pointerEvents. Відповідні залишаються яскравими. Це працює миттєво, без звернення до сервера — всі дані вже на клієнті.

function filterChessBoard(filters) {
    apartments.forEach(apt => {
        const el = document.querySelector(
            `[data-apartment-id="${apt.svgId}"]`
        );
        if (!el) return;

        const match =
            (filters.rooms.length === 0 ||
                filters.rooms.includes(apt.rooms)) &&
            apt.area >= filters.areaMin &&
            apt.area <= filters.areaMax &&
            apt.price >= filters.priceMin &&
            apt.price <= filters.priceMax;

        el.style.opacity = match ? '1' : '0.1';
        el.style.pointerEvents = match ? 'auto' : 'none';
    });
}

Адаптивність SVG. На десктопі SVG займає 100% ширини контейнера, viewBox забезпечує масштабування. На мобільних пристроях (екран < 768px) шахматка в режимі фасаду нечитабельна — квартири занадто дрібні для тапу пальцем. Два рішення: 1) перемикання на поповерховий вигляд, де один поверх займає всю ширину екрана, користувач свайпає між поверхами; 2) pinch-to-zoom через бібліотеку panzoom або hammer.js. Перший варіант надійніший.

Оновлення статусів у реальному часі. Коли менеджер бронює квартиру в CRM або 1С, статус на сайті має змінитися без перезавантаження. Варіанти: WebSocket (надлишково для більшості забудовників), Server-Sent Events (простіше), або polling кожні 30 секунд. Polling — найпростіший: AJAX-запит повертає масив [{svgId, status}], JavaScript оновлює кольори. При 200 квартирах у корпусі JSON-відповідь — менше 5 КБ.

Хід будівництва: фотозвіти та камери

Розділ «Хід будівництва» — обов'язковий для об'єктів на етапі будівництва. Інфоблок «Фотозвіти»: елемент = один звіт (дата, опис, множинна властивість «Фото»). Розділи — корпуси. Виведення — timeline, сортування за DATE_ACTIVE_FROM DESC.

Відео з дрона — властивість типу «Рядок» з URL YouTube/Vimeo. Embed через <iframe> з loading="lazy".

Веб-камера — <iframe> з потоком від провайдера (Ivideon, Trassir). Вбудовується в шаблон розділу ЖК. Кешування шаблону вимикається для блоку камери, решта сторінки кешується штатно.

Іпотечний калькулятор із програмами банків

Чистий JavaScript. Highload-блок «Іпотечні програми»: поля BANK_NAME, PROGRAM_NAME, RATE, MIN_DOWNPAYMENT, MAX_TERM, IS_ACTIVE. При завантаженні сторінки квартири — AJAX-запит або інлайн JSON з активними програмами.

Формула ануїтетного платежу:

P = S × (r × (1 + r)^n) / ((1 + r)^n − 1)

де S = вартість − перший внесок
   r = річна ставка / 12 / 100
   n = строк у місяцях

Інтерфейс: вибір банку (select) → підставляється ставка та мінімальний внесок → три повзунки (вартість квартири підставляється автоматично з картки, перший внесок, строк) → результат: щомісячний платіж, переплата, загальна сума. Перерахунок — при кожному русі повзунка, подія input, без debounce (обчислення миттєве).

Порівняння квартир та вибране

Вибране для неавторизованих — localStorage. Масив об'єктів {id, complexId}, максимум 30. Іконка серця в картці квартири та на шахматці. Лічильник у шапці сайту. При авторизації — синхронізація localStorage з Highload-блоком UserFavorites.

Порівняння — до 4 квартир. Таблиця з горизонтальним скролом на мобільних: кімнати, площа загальна/житлова/кухня, поверх, ціна, ціна за м², оздоблення, статус. Планування відображаються в ряд для візуального порівняння.

Генерація PDF планування

Клієнт натискає «Завантажити PDF» на картці квартири — отримує PDF із плануванням, параметрами та контактами забудовника. Генерація на сервері через mPDF або Dompdf.

Шаблон PDF — HTML-файл, який рендериться в PDF. Вміст: логотип забудовника, назва ЖК, корпус, поверх, номер квартири, планування (зображення), таблиця характеристик, QR-код із посиланням на картку. Зображення планування вставляється через <img src="..."> з абсолютним серверним шляхом (mPDF не надійно завантажує за URL).

$mpdf = new \Mpdf\Mpdf(['tempDir' => '/tmp/mpdf']);
$html = $this->renderPdfTemplate($apartment);
$mpdf->WriteHTML($html);
$mpdf->Output('apartment-' . $apartment['ID'] . '.pdf', 'D');

PDF генерується на вимогу, не заздалегідь. Кешування — за ELEMENT_ID + TIMESTAMP_X (хеш): якщо квартира не змінювалась, віддаємо збережений PDF з /upload/pdf_cache/.

Інтеграція з CRM та 1С

Заявки → Бітрікс24. Форма «Забронювати» / «Отримати консультацію» → REST API crm.deal.add (deal, а не lead — забудовник працює з угодами). Поля: TITLE = «Заявка на кв. №{номер}, ЖК {назва}», CATEGORY_ID = воронка продажів нерухомості, UF_CRM_APARTMENT_ID = ID елементу інфоблоку, UF_CRM_COMPLEX = назва ЖК, SOURCE_ID = «WEB». Webhook із секретним ключем, HTTPS.

Синхронізація з 1С. Забудовники ведуть облік квартир у 1С:Підприємство. Ціни та статуси оновлюються в 1С, а сайт має відображати актуальні дані. Варіанти інтеграції:

• Штатний обмін 1С-Бітрікс (модуль catalog) — працює через CommerceML (XML). 1С вивантажує XML з товарами, Бітрікс імпортує. Підходить для цін, але статуси квартир (вільна/заброньована/продана) потребують маппінгу кастомних властивостей.
• REST API — 1С викликає endpoint на сайті (/api/apartments/update-status/), передає JSON {apartment_code: "K1-5-01", status: "reserved", price: 2900000}. Контролер на стороні Бітрікса знаходить елемент за LAYOUT_SVG_ID, оновлює властивості через CIBlockElement::SetPropertyValues.
• Періодичне вивантаження CSV — 1С кладе CSV на FTP, агент Бітрікса раз на 15 хвилин забирає та парсить. Грубо, але працює для забудовників зі старою 1С без REST API.

SEO та мікророзмітка

Шаблони meta через налаштування інфоблоку:

• Title: Купити квартиру в ЖК #SECTION_NAME# — #ELEMENT_NAME#, від #PROPERTY_PRICE# ₴
• Description: #PROPERTY_ROOMS#-кімн. квартира #PROPERTY_AREA_TOTAL# м² на #PROPERTY_FLOOR# поверсі в ЖК #SECTION_NAME#. Забудовник #PROPERTY_DEVELOPER#.

Мікророзмітка — Schema.org Residence для ЖК та Offer для квартири:

{
  "@context": "https://schema.org",
  "@type": "Residence",
  "name": "ЖК Сонячний",
  "address": "м. Київ, вул. Будівельників, 15",
  "geo": {"@type": "GeoCoordinates", "latitude": 50.45, "longitude": 30.52},
  "makesOffer": [
    {
      "@type": "Offer",
      "name": "2-кімн. квартира, 58.3 м², 5 поверх",
      "price": "2800000",
      "priceCurrency": "UAH",
      "availability": "https://schema.org/InStock"
    }
  ]
}

Для SEO-просування за запитами «купити квартиру в ЖК [назва]» критично: унікальний текстовий контент на сторінці ЖК (не тільки картки квартир), хлібні крихти (BreadcrumbList), XML sitemap з окремими URL для кожної квартири.

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

Терміни передбачають готові SVG-файли шахматок від дизайнера з правильною розміткою data-apartment-id. Якщо SVG потрібно створювати з нуля за планувальними кресленнями — додається 1-2 тижні на корпус.