Интерактивная шахматка квартир для сайта застройщика.

Что такое шахматка квартир?

Давайте начнем с простого и ответим на вопрос «что это?». У застройщиков шахматкой принято называть отображение каталога квартир в виде плиток в разрезе дома или подъезда. Это наглядная таблица с секциями, этажами и названиями квартир (обычно это количество комнат).

Шахматкой любит пользоваться отдел продаж — это быстро, наглядно и удобно. Но и посетители не прочь ей воспользоваться (по одному проекту из тех кто дошел до каталога — 85% открывали шахматку).

Интерактивная шахматка квартир для сайта застройщика.

Ситуация

Мы работаем с застройщиком, у которого общий сайт компании со всеми ЖК и стандартным каталогом, а для шахматки используется сервис профитбейс. Потом на один жилой комплекс запустили отдельный сайт, который предполагал полный каталог квартир с фильтром, шахматкой и тп.

Предыдущее решение подходило, но стоило примерно 90000 рублей в год, так как новый домен и новая лицензия. Сами квартиры мы брали с основного сайта и разница была только в наличии шахматки.

Анализ вариантов

После поиска примеров с уже реализованным функционалом, поняли что она не так популярна у разработчиков, встретилось примерно 10 сайтов.

Внешне шахматка выглядит плюс-минус везде одинаково, если не придираться к эстетичности дизайна — много квадратиков, где то красивее, где то нет.

В некоторых сервисах была демка и можно было посмотреть как она строится. Удивление было то, что это почти вручную — надо создать таблицу квартир и прикрепить уже загруженную карточку. В целом не сложно, но время отнимает.. А если 5 домов по 300 квартир, то можно весь день потратить.

Проектирование структуры шахматки

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

Если посмотреть на шахматку квартир, то она очень похожа на обычное меню сайта, только вместо длинных названий там цифры. Т.е. у нее есть понятная и логичная структура, где идет Дом — Подъезд — Этаж — Квартиры. И мы решили придерживаться именно ее.

Интерактивная шахматка квартир для сайта застройщика.

Реализация шахматки квартир

Мы используем систему управления Modx, каталог квартир туда загружается через feed данных (профитбейс, авито или любой другой, не важно) и для обычного фильтра достаточно положить все в одну категорию и все будет работать.

Но мы не сложными манипуляциями создали «дерево» квартир, из этого же фида мы сначала создали Дома, потом в них создали Подъезды, далее Этажи — это были наши папки/категории и в них потом уже загрузили сами квартиры. Для обычного каталога ничего не поменялось, а шахматка стала работать автоматически.

После того как у нас появилась структура каталога, мы смогли все реализовать. Главное добавить номер квартиры на этаже к каждой квартире, чтобы квартира стояла на своем месте в строке. Этажи и подъезды сортируются по возрастанию. Еще важный нюанс — это надо загрузить все квартиры, чтобы было целостно, или же мы предусмотрели простой вариант перечисления квартир (просто пишем 3,2,1,1,С,3) , но только для проданных квартир.

Фильтрация квартир

Шахматка построилась, но на самом деле, это еще только начало. Нам надо чтобы каждый квадратик показывал превью квартиры с нужными данными, а так же отдавал статус (Бронь, Продана или Акция). Ну просто построить не сложно, по схеме того же меню.

А как быть с фильтрацией? А вот тут все на много сложнее, мы не можем использовать ту же структуру, потому что фильтр выдает общий массив данных и перестроить его при каждом изменении цены было бы слишком нагружено.

Мы решили все самое тяжелое положить в этот фильтр и вывести каталог отдельно от шахматки. С помощью js и id сопоставить квадратики с квартирами из каталога и так фильтровать.

350+ квартир грузятся за 1.25 секунды

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

Интерактивная шахматка квартир для сайта застройщика.

В итоге получили автоматическую шахматку квартир

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

Живые примеры можете посмотреть на наших сайтах, например ЖК Горизонты в ЖК Горизонты Северодвинске.

Основные плюсы нашей реализации:

  • Автоматическое построение из каталога
  • Статусы квартир (наличие, бронь, продана, акция и тп)
  • Превью с любыми параметрами при наведении
  • Переменная этажность секций
  • Любое кол-во секций в доме (будет просто листаться)
  • Фильтрация по любым параметрам
  • Быстрая загрузка страницы
  • Симпатичный дизайн
  • Адаптация под мобильные устройства
  • Можно выводить по одной секции
  • Просто включаем или выключаем без дополнительных настроек!

Нюансы

  • Нужно правильно строить структуру каталога
  • Добавлять каждой квартире номер на этаже
  • При большом кол-ве квартир будет грузиться дольше
  • Если в доме 30 секций, будет не так удобно
  • Наверное еще что-то есть, мы пока не встретили

Не стали вдаваться в технические подробности, если интересно, можете написать нам, обсудим.

Спасибо! Будем рады отзывам и предложениям. Больше кейсов на нашем сайте JRabbit.ru

Начать дискуссию