Со стороны каталог выглядит просто: сетка карточек, фильтр по цене и площади, кнопка «посмотреть планировку». Кажется, что это типовой шаблон, который собирается за неделю.

На деле каталог — это ядро сайта девелопера. Через него идёт выбор квартиры, бронирование и сделка. И именно здесь ломается большинство сайтов застройщиков: данные расходятся с реальностью, планировки тормозят, проданные квартиры отдают ошибку, а шахматка показывает то, чего уже нет в продаже.

Это технический кейс. Ниже — как устроен каталог, который много лет ведёт один наш клиент-девелопер: выгрузка из 1С, интерактивные планировки и шахматка с бронированием. И где в этой механике закопаны грабли, на которые наступают почти все.

[1] Каталог решает не дизайн, а данные

Главная боль сайта недвижимости — актуальность. Квартиры продаются каждый день, цены меняются, появляются скидки и наценки. Если вести это руками, сайт всегда отстаёт на день-два. Клиент открывает карточку, а квартиры уже нет — это худшее, что может случиться с каталогом.

Поэтому каталог мы завязали на выгрузку из 1С и постепенно убрали ручную работу.

Цены считаются сами. Из 1С приходит поле «наценка» — сайт формирует итоговую цену, отдельно держит цену со скидкой и позволяет отключить скидку по конкретной квартире вручную, если так нужно отделу продаж. Менеджер не пересчитывает прайс в Excel, а сайт не показывает вчерашние цифры.

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

Звучит гладко. Но именно интеграция с 1С — самое сложное место в любом таком проекте.

[2] Где 1С ломает каталог

Выгрузка — это не «забрал файл и показал». Это поток данных, в котором регулярно прилетает то, чего код не ждёт.

Простой пример из реальной отладки. Квартиры переставали обновляться, и причин оказалось сразу несколько. Проверка статуса принимала любой ответ сервера за успех — даже если сервер вернул ошибку. Фоновая задача обновления просто не запускалась: настроена была неправильно, а код молчал. В самой выгрузке встречались квартиры с пустым статусом или статусом «Платная бронь» — их код не ожидал, и это ломало логику.

По отдельности — мелочи. Вместе — каталог, который тихо врёт.

Лечится это не геройским фиксом, а скучной дисциплиной: добавить нестандартные статусы в исключения, пустой статус переводить в «закрыто», логировать каждую квартиру, которая ведёт себя не по правилам. Каталог надёжен ровно настолько, насколько аккуратно он обрабатывает мусор на входе.

Отдельная история — что делать с квартирами, которые просто пропали из выгрузки. Раньше менеджеры прятали проданное вручную, по списку, каждый день. Мы сделали ночную сверку: добавили в данные отметку о последнем появлении квартиры в фиде и автоматическую задачу, которая скрывает записи, не встречавшиеся дольше заданного срока. Пропала из фида — скрылась на сайте, вернулась — снова активна.

И тут же выяснилось, почему такие вещи нельзя катить «в лоб». Сначала мы удаляли квартиры, отсутствующие в фиде дольше трёх дней. Потом пришлось убрать срабатывание по выходным — когда выгрузка не приходит пару дней, нельзя сносить полкаталога — и подкрутить срок. Автоматизация в недвижимости почти всегда упирается не в код, а в исключения из правил.

[3] Планировки: красиво на макете, тяжело в браузере

Интерактивные планировки — это то, ради чего человек вообще заходит в каталог. Навёл на этаж, увидел свободные квартиры, кликнул, открыл планировку. На макете в Figma это выглядит идеально. В браузере - сложная задача для разработки.

Обводки квартир — это SVG поверх планов этажей. Их надо нарисовать для каждой секции каждого этажа каждого дома. Не «нарисовать один раз», а вести: дом ещё строится, секции выгружаются по мере готовности, этаж внезапно делится на два подъезда — и все обводки нужно перезаполнять. Для одного жилого комплекса это десятки этажей и сотни контуров, и каждый привязан к конкретной квартире в 1С по id.

Здесь же вылезает производительность. Планировка паркинга с большим числом машиномест — это SVG с огромным количеством элементов, и она начинает заметно тормозить при загрузке. Красивый план, который три секунды думает, прежде чем отреагировать на наведение, хуже простого, который отвечает мгновенно. Поэтому часть работы — это не «нарисовать», а «заставить браузер не задыхаться».

И мелочи, на которых спотыкаются шаблоны. Плашка с инфо о секции, которая выходит за край генплана и обрезается. Заглушки для секций, где квартиры ещё не выгружены, — иначе пользователь тыкает в пустоту. Комплекты парковок с номерами через дефис вида 160-1, 160-2, которые типовой парсер разбирает неправильно. По отдельности — ерунда. Вместе — разница между «каталогом как у больших» и «вроде работает».

[4] Шахматка: один экран, три правды

Шахматка — это сетка всех квартир в доме: этажи по вертикали, стояки по горизонтали, цвет показывает статус. Для отдела продаж это рабочий инструмент, не витрина. И главная сложность здесь не в отрисовке, а в том, что у одного экрана несколько ролей с разными правами.

Разное отображение шахматки квартир для разных ролей пользователей
Разное отображение шахматки квартир для разных ролей пользователей

Гость видит свободные квартиры и цены. Агент — то, что доступно ему. Менеджер отдела продаж видит и бронирует, в том числе то, что скрыто от остальных. Одна и та же сетка должна показывать разным людям разную правду — и при этом не отдать лишнего тому, кому не положено.

Сверху — статусы, которые должны совпадать с реальностью в моменте. Забронированные квартиры подсвечиваются в шахматке отдельно, иначе два менеджера продадут одно и то же. А квартиры из неактивных секций и корпусов нужно деактивировать, чтобы их нельзя было выбрать, — это отдельная задача, не «спрятать на фронте», а честно закрыть в данных.

Шахматка наглядно показывает разницу между сайтом и инструментом продаж. Витрина просто рисует квартиры. Инструмент знает, кто перед ним, что этому человеку можно, и что из показанного действительно можно купить прямо сейчас.

[5] Когда квартиру всё-таки продали

Любой каталог рано или поздно упирается в вопрос: что показывать на странице проданной квартиры. Самый частый ответ на сайтах застройщиков — 500-я ошибка. Ссылка осталась в выдаче, в закладках, в рекламе, человек переходит и попадает в никуда.

Мы сделали иначе. Проданная квартира получает статус «Продано», под ней — галерея похожих квартир на других этажах. Если распродана вся секция, идёт редирект на список квартир ЖК с нужным фильтром. Заодно переписали SEO-шаблоны заголовков и описаний для таких страниц, чтобы поисковики не спотыкались, а человек не утыкался в тупик.

Это та работа, которую никто не заказывает отдельно. Но именно она отличает каталог, за которым следят, от каталога, который просто запустили.

[6] Что учесть застройщику при разработке каталога

Каталог — это про данные, а не про дизайн. Красивая сетка карточек, которую менеджер обновляет руками, проиграет простой, которая берёт актуальные остатки и цены из 1С сама. Сначала надёжный поток данных, потом красота.

Закладывайте бюджет на исключения. Пустые статусы, «платные брони», номера через дефис, выходные без выгрузки — каталог ломается не на основном сценарии, а на краях. Большая часть инженерной работы уходит именно туда, и это нормально.

Интерактив стоит держать в рамках. Планировки и шахматка продают, но только пока быстро отвечают. Тяжёлый SVG, который тормозит, отпугивает сильнее, чем простой план без анимаций.

И проверяйте, что происходит после продажи. Если проданная квартира отдаёт ошибку, вы теряете и трафик, и доверие на ровном месте. Это чинится за разумные часы и окупается сразу.

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