Фронт страницы конфигуратора

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

Конфигурация дома - Шаг 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. Сохранение данных: Все выборы должны сохраняться, и пользователь должен иметь возможность вернуться к ним на любом этапе конфигуратора без потери данных.