Результат Процесс
Сайт застройщика ГК «ТИС»
Сибирикс

Сайт застройщика ГК «ТИС»

Конструкторы, интерактив и крутой стек технологий

Сайт застройщика ГК «ТИС»

Конструкторы, интерактив и крутой стек технологий
Бывают проекты, которые бросают тебе вызов. А потом — ещё вызов. И ещё один. Где ты пробуешь новое и неустанно ищешь крутые решения. Где всё не так, как всегда. Где хочется выжать из себя не 100% и не 200%, а все 1000%, чтобы результат был сильно выше ожидаемого. Такие проекты навсегда западают тебе в душу. И становятся любимчиками всей команды. Сайт для тюменского застройщика ГК «ТИС» — стал для нас именно таким :)
ГК «ТИС» — топовый застройщик на рынке жилой и коммерческой недвижимости Тюмени. Проекты компании меняют облик города, развивают его инфраструктуру и задают современные стандарты отрасли. Поэтому и сайт застройщику нужен был такой же продвинутый, современный и удобный.

Самые современные технологии

Laravel, Voyager, Vue.js, Vuex , Elasticsearch

Леонид
Разработчик
— Проект — довольно интересный, не совсем типовой. Вместо Битрикса, который отлично подходит для создания корпоративных сайтов с каталогами, здесь мы использовали целую пачку технологий:

фреймворк Laravel плюс админку Voyager, заточенную специально под него; фреймворк для создания пользовательских интерфейсов Vue. js плюс Vuex — реактивную технологию, которая является частью Vue; а для фильтра — могучий Elasticsearch.

За счёт такой кастомной реализации получилось сделать проект максимально учитывающим все нужды клиента. Например — предусмотреть группировки квартир в списке (по определенным параметрам фильтра выводится не карточка квартиры, а карточка нескольких квартир).

И конечно, мы использовали CSS-переменные: за счёт них, например, мы можем перекрашивать страницы жилых комплексов застройщика в фирменные цвета. Да, штука не новая, но с тех пор, как IE11 сбросили со скалы (This is Sparta!), её можно использовать без оглядки на него :)

Елена
Руководитель проекта
— Главное пожелание заказчика — никакого Битрикса, с которым у него были проблемы из-за техподдержки на прошлом проекте. Почему Laravel? Потому что клиент хотел что-то универсальное, чтобы потом можно было разработать REST API и мобильное приложение.

Главной задачей было получить сайт-конструктор, у которого каждая страница и каждая сущность будет редактироваться в админке. Абсолютно каждая. Что и получилось в итоге :)

Чувствительный фильтр

На главной странице пользователя встречает фильтр для поиска квартир. Ищет сразу по нескольким параметрам: количеству комнат, площади, стоимости и специфическим требованиям вроде акций, скидок и маткапитала. Позже запрос можно уточнить на странице выдачи:

  • выбрать тип планировки и этаж,
  • конкретный ЖК,
  • вид из окон и отделку,
  • указать особенности (панорамные окна, 2 санузла, терраса и т. д.).
фильтр в каталоге на сайте
Особенности из параметров фильтра работают как теги на карточках каталога квартир: сразу видно, где есть большая кухня, гардеробная или 2 санузла.
Особенности квартир — сразу в карточках каталога
Особенности квартир — сразу в карточках каталога

Дмитрий
Разработчик
— Фильтрацию в каталоге «пилили» сами, включая и «умность» фильтра. Чаще мы на проектах используем битриксовый, потому что он закрывает потребности пользователей.

Здесь — обратились к Elasticsearch, чтобы сократить количество запросов к базе данных для получения списка возможных значений каждого из параметров фильтра. Изначально было примерно 3N запросов, где N — количество параметров. С Эластиком удалось сократить до N запросов к базе и паре запросов к самому Эластику.

Елена
Руководитель проекта
— Фильтр — динамический, при изменении параметра фильтрации сразу становятся недоступны неподходящие параметры, и показывается актуальное количество объектов.
Если на странице выдачи кликнуть на конкретную квартиру, паркинг или нежилое помещение — попадаешь на его детальную страницу. У квартир, например, там можно посмотреть планировку на схеме и на 3D-модели, пройтись внутри с виртуальным туром или оценить вид из окна и детали строительства. Это особенно удобно для пользователя, который может сразу представить, каким будет будущее жильё, не приезжая в офис застройщика или на сам объект.
оформление детальной страницы в каталоге
Детальная страница квартиры: можно посмотреть на жильё со всех сторон и даже оценить будущий вид из окна

Интерактивный подборщик квартир

Если нравится конкретный жилищный комплекс от застройщика, можно выбрать квартиру сразу в нём. Для этого на сайте предусмотрели интерактивный подборщик: сначала выбираем нужный корпус на 3D-плане ЖК, потом — этаж, следом — конкретную планировку.
онлайн-подбор в каталоге
Пошаговый интерактивный подборщик квартир в конкретном ЖК
В первой версии подборщика между уровнями была зависимость: например, если выбрать 5-й этаж 1-го корпуса, будут доступны квартиры, которые находятся только на 5-ом этаже 1-го корпуса. Но когда появились подборщики для парковок и кладовок, возникла проблема с уровнями. Этаж мог быть отрицательным (подземным) или отсутствовать на схеме вовсе. Или могла быть указана дополнительная секция, которой нет на плане с квартирами, потому что там — только парковки.

Так появилась вторая версия подборщика, для которого мы сделали фильтры по элементам (корпус/этаж/ЖК) непосредственно в админке, в интерфейсе подборщика.

Евгений
Разработчик
— Админка касаемо подборщика — гибкая. Шаги можно ставить в произвольном порядке, можно даже сделать их повтор, задавать каждому своё название. При необходимости какие-то шаги можно опустить.

Также можно включить отображение элементов предыдущего шага — чтобы быстро к нему вернуться, если нужно. Например, если смотришь квартиры 1 этажа, то сбоку выводятся остальные этажи (с прошлого шага): можно кликнуть на любой другой этаж — сайт сразу выведет квартиры этого этажа.
С вёрсткой тоже было интересно. Обычно такие штуки реализуются просто и универсально: отрисовываются SVG-изображения, накладываются поверх карты и показываются пользователю при выборе. Здесь из-за цветового кодирования разных ЖК возникла необходимость, чтобы под каждый из них SVG-изображения были своего полупрозрачного цвета. Да ещё и — самых разных форм под каждый корпус, этаж, квартиру и под любую планировку, которая только может прийти в голову проектировщику жилых комплексов. Решение проблемы — добавление произвольной области прямо в админке.
Интерактивный подборщик мы предусмотрительно адаптировали под мобильную версию: на ней всё работает так же чётко, как и на десктопе.

Елена
Руководитель проекта
— На верстке столкнулись с тем, что рендеры могут быть достаточно большого размера, и прикрутили фуллскрин к подборщику, чтобы пользователя ничего не отвлекало. Но на мобильных устройствах использовать такой подборщик не получилось из-за его масштабов — поэтому под него сделали отдельные макеты и верстку.

Конструкторы. Много конструкторов


Елена
Руководитель проекта
— Обычно на проектах с Битриксом мы делаем типовую текстовую страницу, для которой создаем разные варианты блоков. В Laravel всё иначе, поэтому на дизайне мы предусмотрели универсальный шаблон-конструктор страниц, который дополнили ещё пачкой компонентов:
 — баннерами 2-х форматов;
 — слайдером изображений с описанием к каждой картинке;
 — табами;
 — прикреплением файлов;
 — формой обратной связи.
Для сборки кастомизировали редактор Tiny.MCE, который предусмотрен в Laravel. Для этого сделали компоненты, как сниппеты/компоненты в Битриксе, а их создание кастомизировали: залинковали каждый компонент с местом в админке, где тот создается. Благодаря этому получился схожий с Битриксом функционал, когда типовую текстовую страницу можно собрать из любых нужных компонентов из списка.

Дмитрий
Разработчик
— Типовая текстовая страница — стоит особняком, поскольку в Laravel в принципе нет такого понятия. Да еще и дизайн у неё оказался не самым простым: с баннерами, вкладками, возможностью встраивания одной страницы в другую. Поэтому в админке пришлось создавать механизм, который позволяет внутри текста вставлять компоненты (прямо как в Битриксе).

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

Поэтому мы предусмотрели на сайте собственный конструктор страниц, чтобы силами контент-менеджера без сложной верстки можно было просто и быстро создавать страницы под каждый ЖК.

Елена
Руководитель проекта
— То, что было понятным на аналитике, — вызвало вопросы на дизайне. Оказалось, что у каждого ЖК свой брендбук, фирменный стиль, что комплексы отличаются по ценовому сегменту и предназначены для разной ЦА. Поэтому мы сделали ещё и конструктор страниц для ЖК с учетом цветового кодирования и фирменных паттернов.
В конструкторе страниц ЖК можно задавать цветовую схему (основной цвет и альтернативный), поддомен, паттерны для фона, баннеры и формы обратной связи. Формы, кстати, «умные» — сразу улетают в CRM на правильные, заданные в админке адреса именно тем менеджерам, которые отвечают за продажи конкретного ЖК.

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

Чёткие импорты

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

Леонид
Разработчик
— В первом спринте мы написали кастомный импорт: он берёт данные каталога из 1С и все дополнительные сущности. Импорт — одним файлом, выгрузка — по расписанию. Дополнительно прописали обмен c 1C: для этого написали обработчики на стороне сайта, по которым 1С сразу передаёт изменение цен и статусов.

Что ещё

  • В процессе релиза — мощный личный кабинет, который по функционалу почти как «Дом.Клик» от Сбера. Сейчас отлаживаем его работу с CRM.

  • Яндекс. Карты с цветными метками жилых комплексов — чтобы можно было посмотреть, где какой комплекс находится и какие объекты городской инфраструктуры рядом с ним есть.

  • График цен на странице квартир — в лучших традициях маркетплейсов.

  • Забота о пользователе в мелочах: ипотечный калькулятор, сводка по ставкам ключевых банков по ипотеке, аккуратный блок услуг (трейд-ин, соцпрограммы, рассрочка и т. д.).

Готовый проект