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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нюансы

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

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