Добавление 6 дома на сайт ЖК «EDEM»

Ход работы

Процесс реализации проекта был разделен на несколько этапов: от подготовки графического контента до программирования логики взаимодействия с базой данных.

1. Подготовка графических материалов и рендеров

Первым этапом стала работа с визуальной составляющей. Поскольку сайт базируется на принципе Visual Selection (визуальный подбор), необходимо было подготовить качественные рендеры 6-го дома в различных ракурсах.

• Генплан: Мы обновили общую карту комплекса, добавив активную зону для 6-го дома. Для этого был использован метод наложения SVG-масок (polygon mapping) на статичное изображение.
• Фасады и этажи: Для каждого этажа 6-го дома были созданы отдельные планы с учетом архитектурных особенностей именно этой очереди строительства.
• Планировки квартир: Каждая планировка была переведена во векторный формат для быстрой загрузки и корректного отображения на мобильных устройствах.

2. Создание структуры данных в CMS

Для того чтобы 6-й дом стал частью общей экосистемы, была проведена настройка административной панели:

• Создание новой сущности «Дом №6» с привязкой к существующим категориям.
• Настройка иерархической модели: Дом -> Секция -> Этаж -> Квартира.

3. Программирование интерактивного выбора (Frontend-часть)

Самым важным этапом стала разработка логики переходов. Мы реализовали функционал «проваливания» вглубь объекта:

Уровень 1 (Генплан): При наведении курсора на 6-й дом срабатывает подсветка контура. При клике пользователь переходит на страницу выбора секций/этажей именно этого дома.

Уровень 2 (Поэтажный план): Была реализована интерактивная шахматка. Каждый этаж 6-го дома — это отдельный объект, который при наведении показывает количество свободных квартир.

Уровень 3 (Выбор квартиры): На плане этажа каждая квартира является кликабельной зоной. Мы использовали библиотеку для манипуляций с SVG, чтобы обеспечить плавную смену цветов при наведении.

4. Синхронизация с CRM и базой данных

Чтобы информация о наличии квартир в 6-м доме была актуальной, мы настроили синхронизацию. Любое изменение статуса объекта в базе данных застройщика автоматически отображается на сайте. Были прописаны скрипты валидации, которые проверяют целостность данных перед публикацией нового дома в открытый доступ.

5. Адаптация и тестирование

Поскольку выбор недвижимости часто происходит с мобильных устройств, мы уделили особое внимание UX-дизайну 6-го дома на смартфонах. Вместо сложных наведений (hover) была реализована система тапов с всплывающими подсказками. Проведено тестирование скорости загрузки планов, так как большое количество SVG-элементов могло замедлить страницу.

Полученный результат