Жилой комплекс "Фили град"

Жилой комплекс "Фили град"

Главная страница

Главная страница

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

Планировка корпусов ЖК

Жилой комплекс «Фили град» состоит из корпусов (домов). Корпус может быть открыт для перехода на страницу детального просмотра или закрыт. Если корпус открыт – при наведении на него появляется белый прозрачный слой, показывающий контуры корпуса на плане Жилого комплекса. Кликнув на этот слой, посетитель сайта перейдет на страницу выбранного корпуса. На странице со списком корпусов для каждого корпуса задается «ярлык» - это изображение с названием корпуса и его статусом – «в продаже» или «скоро в продаже». Статусы корпуса и активность переходов только в определенные корпусы обусловлены последовательной сдачей корпусов в эксплуатацию. Как только корпус достраивают – его выставляют на продажу. Это процесс продолжительный во времени. Когда корпус будет полностью продан – его можно будет закрыть. Ярлык каждого корпуса может позиционироваться в любом месте страницы, как того требует макет. Верстка раздела масштабируема. Отличительной особенностью раздела является то, что вместе с фоном масштабируется и подсветка активных корпусов - меняется ее положение и размер, чтобы точно совпадать с изображением на фоне.

План корпуса

Кликнув на подсветку корпуса на плане Жилого комплекса, пользователь попадет на страницу детального просмотра корпуса. Каждый корпус может включать в себя любое количество секций (подъездов). Каждая секция включает любое количество этажей. При наведении на секцию она подсвечивается белым прозрачным слоем. Чаще всего, наводя на секцию, пользователь одновременно наводит на какой-либо этаж. Если данные по этажу заполнены – этаж подсвечивается оранжевым прозрачным слоем. Подсветка секции при этом сохраняется. При наведении на этаж - слева от активной секции напротив активного этажа появляется ярлык с информацией по этажу (номер секции, номер этажа, количество свободных апартаментов или квартир – в зависимости от выбранного раздела). При перемещении курсора по этажам – информация и положение ярлыка этажа меняется. Когда пользователь кликает по оранжевой области этажа при помощи Ajax выполняется скрипт PHP, который выбирает из базы данных сайта (инфоблока) информацию по данному этажу и возвращает ее без перезагрузки страницы во всплывающий блок этажа. При этом пока отображается всплывающий блок с информацией по этажу, выделение контуров секции и выбранного этажа на плане корпуса сохраняется.

План этажа

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

План квартиры

Если пользователь кликнет на область свободного (активной) помещения на плане этажа – откроется подробный план площади. Информация, которая появлялась слева - при наведении на помещение на плане этажа, зафиксируется. Для площади есть возможность задать 2 изображения – план в «2D» и план в «3D». По умолчанию всегда выводится план «2D». Если у площади есть и изображение в «3D» - внизу всплывающего блока появляется кнопка «3D», нажав на которую изображение «2D» сменится на «3D». Фон изображения станет серым. А переключатель внизу теперь будет предназначен для перехода обратно на план «2D». План площади можно распечатать, нажав соответствующую кнопку в левом нижнем углу всплывающего окна помещения (как в режиме «2В», так и в «3D»).

Подбор по параметрам и генерация PDF

По умолчанию выводятся все типы помещения из обоих разделов – апартаменты и квартиры. Пользователь может искать помещения, как только по одному из типов, так и по обоим одновременно. Справа от результатов выборки находятся ползунки для установки параметров новой выборки. Крайние значения ползунков вычисляются автоматически на основе анализа всех элементов базы данных планировок. Фильтрация помещений кроме типа помещения может происходить по следующим параметрам (от и до): количество комнат, этаж, площадь, стоимость, цена за кв. метр. Обновление результата выборки происходит без перезагрузки страницы при помощи Ajax и JQuery. Для каждого помещения выводится следующая информация: статус (в продаже или продана), площадь, количество комнат, номер корпуса, номер секции, номер этажа, стоимость. Статус помещения в таблице результатов фильтрации является ссылкой, при нажатии на которую происходит автоматическая генерация PDF-файла. После завершения генерации файла сайт предлагает сохранить его пользователю на локальный компьютер.

Интерактивные формы

В футере сайта доступны кнопки для открытия всплывающих форм сайта - "Оставить заявку на покупку" и "Заказать звонок". В дизайне и верстке форм использованы нестандартные элементы управления с уникальным интерфейсом. Результаты заполнения форм сохраняются в административной части сайта. Это стандартный функционал CMS 1C-Битрикс. Менеджеры сайта получают уведомление на e-mail о появлении нового результата заполнения посетителем сайта формы. Уникальность алгоритма отправки уведомлений менеджерам заключается в том, что администратор сайта имеет возможность установить группы электронных адресов, которым будут высылаться результаты заполнения форм. Причем, чтобы распределить нагрузку обработки результатов – письма отсылаются созданным группам поочередно. Система запоминает, какая группа менеджеров получала письмо в прошлый раз и отправляет в следующий раз письмо другой группе менеджеров. И при этом не важно – какую конкретно форму заполнил пользователь. Поток писем с обеих форм объединяется. По умолчанию в CMS 1С-Битрикс можно задать получателей писем для каждой формы отдельно, создание общего потока писем – уникальный функционал сайта ЖК «Фили град».

Карта на фоне сайта

На фоне сайта помимо изображений может быть размещена Яндекс-карта. Подобная карта есть в разделе «Контакты». Карта также масштабируется и адаптируется под размеры экрана. На карте при помощи Яндекс API встроен уникальный маркер местоположения компании. На карте специально удалены стандартные элементы управления, которые могли бы испортить внешний вид сайта (кнопки изменения масштаба, перемещения карты, ссылки на Яндекс и прочее). Есть возможность двигать карту при помощи курсора.

Описание проекта

Разработка современного, красивого, удобныого сайта с масштабируемой версткой, с собственной логикой появления и скрытия контентных блоков, с нестандартными элементами управления. Внедрили структуру базы данных для хранения информации о планировках. Создали собственный компонент для ее вывода. И отдельный компонент для подбора помещений по параметрам без перезагрузки страницы (Ajax и JQuery), с функционалом генерации pdf-файлов.
Написали уникальный алгоритм поочередной отправки писем с сайта единым потоком.
Создали, настроили и внедрили информационные блоки сайта.
Наполнили проект контентом.
Подробная информация представлена в кейсе к проекту.

Другие работы в категории "Промо-сайты"