Фронт сторінки конфіруратора

Ось структура технічного завдання для фронт-енд-спеціаліста, яка описує послідовність етапів конфігуратора будинку. Вона враховує логічний порядок вибору та способи взаємодії через галочки для вибору опцій.

Конфігурація будинку - Крок 1: Вибір проєкту

 1. Типи проєктів (Фільтр для вибору типу будинку):

 • Фахверкові будинки

 • Glulam

 • Сауни

 • Садові будиночки

 Примітка: Користувач вибирає один з варіантів, після чого система звужує пошук, відображаючи відповідні проєкти.

 2. Перехід на вибір проєкту:

 • Після вибору типу проєкту, користувач бачить перелік доступних варіантів. Потрібно відобразити проєкти у вигляді карток із зображенням і основною інформацією (назва, короткий опис, ціна).

 • Користувач вибирає один проєкт, після чого переходить до наступного кроку конфігуратора.

Конфігурація будинку - Крок 2: Вибір опцій

Цей етап буде містити наступні опції для налаштування будинку. Для кожної категорії вибору передбачено можливість ставити галочки для вибору одного або кількох варіантів, де це дозволено.

Виглядає це як рядки  фото, де користувач ставить  галочки під фото. в деяких пунктах дозволено 1 або 2 вибори.

 1. Тип вікон (Вибір одного варіанту):

 • Соснові (Pine)

 • Дубові (Oak)

 • Сосново-алюмінієві (Pine-Aluminium)

 2. Двері міжкімнатні (Вибір одного варіанту):

 • Масивні (Solid)

 • Прихованого монтажу (Hidden Mounting)

 • Не вибирати (None)

 3. Вхідні двері (Вибір одного варіанту):

 • Класичні (Classic)

 • Півод (Pivot)

 • Не вибирати (None)

 4. Заповнення стін (Вибір одного варіанту):

 • Pir Panel (50 R-value) 

 • Не вибирати (None)

 5. Кладінг зовнішніх стін (Вибір 1-2 варіантів):

 • Штучний камінь (Artificial Stone)

 • (Shou sugi ban) / Термічно оброблений планкен (Thermal-Processed Plancken)

 • Камінь або клінкер (Stone or Clinker)

 • Не вибирати (None)

 6. Система розумного будинку (Вибір одного варіанту):

 • Стандартна система (Standard)

 • All-inclusive (Все включено) (Advanced)

 • Не вибирати (None)

 7. Аудіосистема (Вибір одного варіанту):

 • Стандартна аудіосистема (Standard Audio System)

 • Не вибирати (None)

 8. Система опалення (Вибір одного варіанту):

 • Тепловий насос з фан-коїлами і теплою підлогою (Heat Pump with Fan Coils and Underfloor Heating)

 • Не вибирати (None)

 9. Вентиляція (Вибір одного варіанту):

 • Розумна вентиляція (Smart Ventilation)

 • Не вибирати (None)

 10. Декоративна підсвітка фасаду (Вибір одного варіанту):

 • Так (Yes)

 • Ні (No)

 11. Кухня (Вибір одного варіанту):

 • МДФ плита з штучним каменем (MDF Plate with Artificial Stone)

 • Кухня з масиву або шпонована з мармуровою столешнею (Luxury Kitchen with Solid Wood or Veneer with Marble Сountertop)

 • Не вибирати (None)

 12. Санвузли (Вибір одного варіанту):

 • Повний комплект у кожному санвузлі (Full Set in Every Bathroom)

 • Не вибирати (None)

 13. Покрівля (Вибір одного варіанту):

 • Фальцева кривля (Faltz roof)

 • Без вибору (None)

Крок 3: Перегляд та підтвердження вибору

 1. Після завершення вибору всіх опцій, користувач може переглянути всі зроблені вибори в зручному підсумковому вигляді. Для кожного параметра відображається обраний варіант і ціна (якщо є).

 2. Користувач може відкоригувати будь-які параметри, повернувшись до попередніх кроків, або підтвердити вибір.

Технічні вимоги для фронт-енду:

 1. Галочки: Для всіх опцій використовувати чекбокси (галочки), щоб користувач міг обрати лише один варіант у кожній категорії, за винятком тих, де можливо вибрати “не вибирати”.

 2. Логічні переходи: Після вибору кожного пункту має бути чітка логіка переходу до наступного етапу без необхідності додаткових підтверджень. Використовувати плавні переходи між етапами для комфортної навігації.

 3. Реактивні зміни: Система має динамічно відображати зміну вартості залежно від вибору користувача. Вартість кожного вибору повинна бути чітко позначена поряд із відповідною опцією.

 4. Збереження даних: Всі вибори повинні зберігатися, і користувач повинен мати змогу повернутися до них на будь-якому етапі конфігуратора без втрати даних.