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

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

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

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

Ми гарантуємо, що ваша шахівниця буде працювати швидко, адаптивно та синхронізуватися з 1С. Сертифіковані спеціалісти Бітрікс забезпечують стабільність та безпеку рішення. За 10+ років ми реалізували понад 200 проектів для забудовників — від невеликих ЖК до порталів великих девелоперів.

Як шахівниця збільшує конверсію?

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

Чому інтеграція з 1С критична?

Забудовники ведуть облік квартир у 1С:Підприємство. Ціни та статуси оновлюються в 1С, а сайт має відображати актуальні дані. Без інтеграції дані вводять вручну — це помилки та затримки, коштують до 200 000 ₽ на місяць на виправлення. Ми пропонуємо три варіанти:

• Штатний обмін 1С-Бітрікс (модуль catalog) — через CommerceML. Підходить для цін, але статуси вимагають маппінгу.
• REST API — 1С викликає endpoint /api/apartments/update-status/, передає JSON {apartment_code, status, price}. Контролер на стороні Бітрікса знаходить елемент за LAYOUT_SVG_ID та оновлює властивості. Час оновлення — менше 1 секунди.
• Періодичне вивантаження CSV — 1С кладе CSV на FTP, агент Бітрікса раз на 15 хвилин забирає та парсить. Помилки при парсингу трапляються у 2% випадків — це прийнятно для застарілої 1С.

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

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

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

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

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

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

Як влаштована інтерактивна шахівниця?

Підготовка SVG-файлу. Дизайнер малює фасад або поетажний план в Adobe Illustrator або Figma та експортує в SVG. Кожна квартира — окремий <path> з атрибутом data-apartment-id, який збігається зі значенням властивості LAYOUT_SVG_ID елемента інфоблоку. Правила іменування: корпус-поверх-номер (наприклад, K1-5-01). Формат фіксується в технічному завданні. Якщо дизайнер надішле SVG без атрибутів — розробник витратить 2-3 дні на розмітку вручну. Тому шаблон SVG з прикладами атрибутів передається дизайнеру до початку відмальовки.

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

$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-масив квартир поточного корпусу. Структура JSON:

const apartments = [
  {
    svgId: "K1-5-01",
    id: 4521,
    rooms: 2,
    area: 58.3,
    floor: 5,
    price: 7200000,
    status: "available",
    layoutImg: "/upload/layouts/k1-5-01.jpg",
    url: "/zhk-solnechnyj/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.addEventListener('mouseenter', () => {
            if (apt.status === 'sold') return;
            showTooltip(el, apt);
        });
        el.addEventListener('click', () => {
            if (apt.status === 'sold') return;
            showApartmentCard(apt);
        });
    });
}

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

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

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

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

Оновлення статусів у реальному часі. Коли менеджер бронює квартиру в CRM або 1С, статус на сайті має змінитися без перезавантаження. Ми використовуємо polling кожні 30 секунд: 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 — термін у місяцях. Інтерфейс: вибір банку → підставляється ставка та мінімальний внесок → три повзунки (вартість квартири підставляється автоматично, перший внесок, термін) → результат: щомісячний платіж, переплата, загальна сума. Перерахунок — при кожному русі повзунка. Завдяки цьому клієнти економлять до 200 000 ₽ на рік, підбираючи оптимальну програму.

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": "7200000",
      "priceCurrency": "UAH",
      "availability": "https://schema.org/InStock"
    }
  ]
}

Що входить у розробку сайту забудовника під ключ

• Аналітика та прототипування шахівниці
• Проєктування структури інфоблоків та HL-блоків
• Інтеграція з 1С та CRM (Бітрікс24)
• Іпотечний калькулятор та форма бронювання
• Генерація PDF планувань
• Адаптивна верстка шахівниці
• Мікророзмітка та SEO-шаблони
• Навчання співробітників роботі з сайтом
• Пост-релізна підтримка протягом місяця

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

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

Вартість розробки розраховується індивідуально залежно від обсягу інтеграцій. Замовте консультацію — оцінимо ваш проект за 1 день. Отримайте розробку сайту забудовника з гарантією результату.

Як правильно проектувати інфоблоки?

Ми бачимо десятки проєктів, де неправильна структура інфоблоків перетворює сайт на гальмо. Типовий сценарій: замовник просить «каталог товарів». Розробник створює один інфоблок catalog, закидає туди 15 властивостей. Через півроку — 40 властивостей, 8 з яких використовуються лише для однієї категорії. Фільтр гальмує, таблиця b_iblock_element_property розрослася до мільйонів рядків, CIBlockElement::GetList виконується 3 секунди. Наслідки — падіння конверсії, втрата клієнтів, додаткові витрати на оптимізацію. В одному проєкті після рефакторингу каталогу час генерації сторінки знизився з 4,2 до 0,8 секунди, а вартість підтримки значно скоротилася — за рахунок усунення надлишкових запитів та агентів.

Наш підхід: проектуємо інфоблоки до першого рядка коду. Окремі інфоблоки під сутності (товари, категорії, бренди), властивості-довідники через HL-блоки, торгові пропозиції для SKU. Це закладає продуктивність на роки вперед. Якщо хочете отримати попередній аудит вашої схеми інфоблоків — зв'яжіться з нами, розберемо типові помилки та надамо рекомендації.

Чому 1С-Бітрікс вигідніший за альтернативи?

Вибір CMS диктується не уподобаннями, а бізнес-завданнями. Ось ключові аргументи:

• Нативний обмін з 1С — модуль catalog.import.1c забезпечує двосторонній обмін товарами, цінами, залишками та замовленнями через CommerceML. Без сторонніх модулів. Це в 5 разів швидше, ніж розробка власного обміну на OpenCart або WordPress. Економія на інтеграції — до 200 000 грн порівняно з кастомними рішеннями.
• Проактивний захист — модуль security включає WAF, контроль цілісності файлів, захист від SQL-ін'єкцій, двофакторну автентифікацію. Для проєктів з вимогами ФСТЭК — сертифіковане рішення (згідно з Wikipedia, це стандарт для корпоративних систем).
• Модульна архітектура — підключаємо лише потрібні модулі: iblock, catalog, sale, search. Менше модулів — менше запитів до БД на кожен хіт.
• Регулярні патчі — вендор випускає security-патчі, закриваючи вразливості швидше, ніж open-source проєкти (середній час виправлення CVE — 2 тижні). Офіційна документація по модулях доступна на сайті розробника.

Що дають HL-блоки і як ми прискорюємо каталог

Highload-блоки — це альтернатива розширеним властивостям інфоблоків, коли список значень може зростати до тисяч записів. Типовий приклад: виробники, країни, кольори. Якщо зберігати їх як властивості-списки в інфоблоці, кожна фільтрація викликає повне сканування таблиці b_iblock_property_enum. З HL-блоками вибірка йде по індексу — час відповіді фільтра знижується з 1–2 секунд до 50 мс. Продуктивність HL-блоків у 8 разів вища за властивості-списки інфоблоків. Ми використовуємо HLB компонент і кастомні запити через Bitrix\Highloadblock\DataManager. Це особливо критично для каталогів з 100 000+ товарами.

З нашої практики — проєкт інтернет-магазину з 500 000 товарів. Стандартний фільтр по бренду виконувався 4 секунди. Сервер не витримував навантаження в 50 одночасних запитів — сторінки падали. Ми перевели довідник брендів у HL-блок, додали теговане кешування на 15 хвилин і налаштували агент для скидання кешу при зміні. Після доопрацювання час фільтрації склав 120 мс, середній LCP сторінки — 1,8 секунди. Проєкт працює стабільно без збоїв.

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

Кожен проєкт включає повний комплект документації та артефактів, що виключає втрату знань після передачі.

• Технічне завдання — user stories, діаграми інфоблоків, схеми інтеграцій.
• Вихідний код у Git — з історією комітів, тегами релізів, правилами гілкування.
• Адміністративна документація — опис кастомних компонентів, інструкції з розгортання, перелік агентів і подій.
• Навчання співробітників — до 3 годин вебінару: панель управління, робота з замовленнями, налаштування цін. Записуємо, щоб можна було переглянути.
• Доступ до staging на час розробки — тестуєте самостійно до деплою на продуктив.
• Гарантійна підтримка — виправлення помилок коду протягом 30 днів після запуску. Післягарантійні абонентські пакети з SLA (реакція 2 години, рішення 8 годин).

Наш процес і технології

Стек: верстка mobile-first, тестуємо на фізичних пристроях (iPhone, iPad, Android). Використовуємо BrowserStack для Safari на iOS. Продуктивність — LCP < 2,5 с, FID < 100 мс, CLS < 0,1. Включаємо композитний сайт (composite), CDN, теговане кешування, WebP/AVIF, lazy loading. SEO — Schema.org через JSON-LD, автогенерація sitemap.xml модулем seo, canonical і hreflang для мультимовних версій. robots.txt закриваємо /bitrix/ від індексації. CI/CD — Git, автодеплой через GitLab CI, staging. Міграції бази — модуль sprint.migration з версіонуванням.

Процес роботи:

1. Аналітика — вивчаємо конкурентів, збираємо вимоги, малюємо прототипи в Figma. На виході — ТЗ з user stories.
2. Дизайн — UI/UX з дизайн-системою. Компоненти перевикористовуються.
3. Розробка — пишемо компоненти з кастомними шаблонами в local/templates/. Бізнес-логіку виносимо в модулі local/modules/.
4. Тестування — функціональне, кросбраузерне, навантажувальне (до 1000 запитів). Критичні баги виправляємо до запуску.
5. Запуск — деплой на прод, моніторинг через UptimeRobot, алерти в Telegram. Усуваємо перші 48 годин.

Інтеграції, мультимовність і редизайн

• Повна локалізація через мовні файли lang/ і механізм SITE_ID. hreflang для кожної версії. Регіональні версії з різними цінами та контентом — визначення за IP (main.geo) або ручний вибір. Мультидоменність — єдине управління кількома доменами.

• Редизайн без втрати позицій: аудит продуктивності (PageSpeed, WebPageTest), SEO (Screaming Frog). Новий шаблон у local/templates/ із збереженням URL-структури. 301-редиректи лише якщо URL змінюється суттєво. Оновлення ядра, перехід на D7 ORM, реструктуризація інфоблоків, міграція через sprint.migration з Git.

Гарантія та підтримка

Ми працюємо з 1С-Бітрікс 12+ років, реалізували 500+ проєктів. У штаті сертифіковані розробники. Фіксована вартість у договорі — без сюрпризів. Гарантійний період покриває помилки коду. Після — абонентські пакети з SLA (час реакції — 2 години, рішення — 8 годин). Моніторинг доступності 24/7, алерти в Telegram. За потреби отримайте попередній аудит — зв'яжіться з нами через форму на сайті або напишіть у чат, відповімо протягом години. Замовте розробку під ключ — ми спроєктуємо інфоблоки, інтегруємо 1С і розженимо каталог. Якщо вже є сайт на іншій CMS — замовте аудит продуктивності та міграцію на Бітрікс.