Front strony konfiguratora

Oto struktura technicznego zadania dla specjalisty front-end, która opisuje sekwencję etapów konfiguratora domu. Uwzględnia ona logiczny porządek wyboru oraz sposoby interakcji poprzez zaznaczanie opcji.

Konfiguracja domu - Krok 1: Wybór projektu

 1. Typy projektów (Filtr do wyboru typu domu):

 • Domy szkieletowe

 • Glulam

 • Sauny

 • Domki ogrodowe

 Uwaga: Użytkownik wybiera jedną z opcji, po czym system zawęża wyszukiwanie, wyświetlając odpowiednie projekty.

 2. Przejście do wyboru projektu:

 • Po wyborze typu projektu, użytkownik widzi listę dostępnych opcji. Należy wyświetlić projekty w formie kart z obrazkiem i podstawowymi informacjami (nazwa, krótki opis, cena).

 • Użytkownik wybiera jeden projekt, po czym przechodzi do następnego kroku konfiguratora.

Konfiguracja domu - Krok 2: Wybór opcji

Ten etap będzie zawierał następujące opcje do dostosowania domu. Dla każdej kategorii wyboru przewidziano możliwość zaznaczania opcji, gdzie to możliwe.

Wygląda to jak rzędy zdjęć, gdzie użytkownik zaznacza opcje pod zdjęciem. W niektórych punktach dozwolone są 1 lub 2 wybory.

 1. Typ okien (Wybór jednej opcji):

 • Sosnowe

 • Dębowe

 • Sosnowo-aluminiowe

 2. Drzwi wewnętrzne (Wybór jednej opcji):

 • Masywne

 • Ukryte (Hidden Mounting)

 • Nie wybierać

 3. Drzwi wejściowe (Wybór jednej opcji):

 • Klasyczne

 • Pivot

 • Nie wybierać

 4. Wypełnienie ścian (Wybór jednej opcji):

 • Pir Panel (50 R-value) 

 • Nie wybierać

 5. Okładzina zewnętrznych ścian (Wybór 1-2 opcji):

 • Sztuczny kamień

 • (Shou sugi ban) / Termicznie przetworzony plancken

 • Kamień lub klinkier

 • Nie wybierać

 6. System inteligentnego domu (Wybór jednej opcji):

 • Standardowy system

 • All-inclusive (Wszystko w jednym) (Zaawansowany)

 • Nie wybierać

 7. System audio (Wybór jednej opcji):

 • Standardowy system audio

 • Nie wybierać

 8. System ogrzewania (Wybór jednej opcji):

 • Pompa ciepła z wentylatorami i ogrzewaniem podłogowym

 • Nie wybierać

 9. Wentylacja (Wybór jednej opcji):

 • Inteligentna wentylacja

 • Nie wybierać

 10. Dekoracyjne oświetlenie elewacji (Wybór jednej opcji):

 • Tak

 • Nie

 11. Kuchnia (Wybór jednej opcji):

 • Płyta MDF z sztucznym kamieniem

 • Kuchnia z litego drewna lub fornirowana z marmurowym blatem

 • Nie wybierać

 12. Łazienki (Wybór jednej opcji):

 • Pełny zestaw w każdej łazience

 • Nie wybierać

 13. Dach (Wybór jednej opcji):

 • Dach falcowy

 • Bez wyboru

Krok 3: Przegląd i potwierdzenie wyboru

 1. Po zakończeniu wyboru wszystkich opcji, użytkownik może przeglądać wszystkie dokonane wybory w wygodnym podsumowaniu. Dla każdego parametru wyświetlana jest wybrana opcja i cena (jeśli jest).

 2. Użytkownik może dostosować dowolne parametry, wracając do wcześniejszych kroków, lub potwierdzić wybór.

Wymagania techniczne dla front-endu:

 1. Zaznaczenia: Dla wszystkich opcji używać checkboxów (zaznaczeń), aby użytkownik mógł wybrać tylko jedną opcję w każdej kategorii, z wyjątkiem tych, gdzie można wybrać „nie wybierać”.

 2. Logiczne przejścia: Po wyborze każdego punktu musi być jasna logika przejścia do następnego etapu bez potrzeby dodatkowych potwierdzeń. Używać płynnych przejść między etapami dla komfortowej nawigacji.

 3. Reaktywne zmiany: System ma dynamicznie wyświetlać zmianę ceny w zależności od wyboru użytkownika. Cena każdego wyboru powinna być wyraźnie oznaczona obok odpowiedniej opcji.

 4. Zachowanie danych: Wszystkie wybory powinny być zapisywane, a użytkownik powinien mieć możliwość powrotu do nich na każdym etapie konfiguratora bez utraty danych.