Разработка сайта застройщика на 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": 55.75, "longitude": 37.61}, "makesOffer": [ { "@type": "Offer", "name": "2-комн. квартира, 58.3 м², 5 этаж", "price": "7200000", "priceCurrency": "RUB", "availability": "https://schema.org/InStock" } ] } 

Что входит в разработку сайта застройщика под ключ

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

Этапы и сроки

Сроки предполагают готовые SVG-файлы шахматок с правильной разметкой data-apartment-id. Если SVG нужно создавать с нуля — добавляется 1-2 недели на корпус.

Стоимость разработки рассчитывается индивидуально в зависимости от объёма интеграций. Закажите консультацию — оценим ваш проект за 1 день. Получите разработку сайта застройщика с гарантией результата.