Разработка сайта застройщика на 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 день. Получите разработку сайта застройщика с гарантией результата.

Как правильно проектировать инфоблоки?

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

Наш подход: проектируем инфоблоки до первой строки кода. Отдельные инфоблоки под сущности (товары, категории, бренды), свойства-справочники через highload-блоки, торговые предложения для SKU. Это закладывает производительность на годы вперёд. Если хотите получить предварительный аудит вашей схемы инфоблоков — свяжитесь с нами, разберём типовые ошибки и дадим рекомендации бесплатно.

Почему 1С-Битрикс выгоднее альтернатив?

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

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

Что дают HL-блоки и как мы ускоряем каталог

Highload-блоки — это альтернатива расширенным свойствам инфоблоков, когда список значений может расти до тысяч записей. Типичный пример: производители, страны, цвета. Если хранить их как свойства-списки в инфоблоке, каждая фильтрация вызывает полное сканирование таблицы b_iblock_property_enum. С HL-блоками выборка идёт по индексу — время ответа фильтра снижается с 1–2 секунд до 50 мс. Мы используем 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 — закажите аудит производительности и миграцию на Битрикс.