Додавання 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-елементів могла сповільнити сторінку.

Отриманий результат