Oprawiamy – konfigurator ram
O projekcie
Nasza współpraca z Oprawiamy ograniczyła się całkowicie do stworzenia zaawansowanego konfiguratora ram i luster. Moduł, zbudowany w technologii React jako web-component i zintegrowany z szablonem IdoSell klienta (Composer), zmienia skomplikowany proces zamawiania w intuicyjną ścieżkę. Skupiając się na podglądzie w czasie rzeczywistym i precyzyjnych obliczeniach w tle, dostarczyliśmy specjalistyczne narzędzie, które pozwala klientom na swobodne tworzenie idealnie dopasowanych, spersonalizowanych opraw, przenosząc jakość usług stacjonarnych do świata cyfrowego.
Wyróżnione elementy
Podgląd na żywo z wgrywaniem zdjęć
Moduł oferuje dynamiczną wizualizację konfigurowanej ramy w czasie rzeczywistym. Użytkownicy mogą wgrać własne zdjęcie lub grafikę, co pozwala na natychmiastową ocenę ostatecznego wyglądu pracy i znacząco zwiększa pewność zakupu.
Dynamiczne wyliczenia na bazie danych
Konfigurator jest zasilany danymi produktów z systemu. Zmiana typu wymiaru automatycznie wpływa na wyliczenia w tle, precyzyjnie dopasowując rozmiary, ceny i dostępność wszystkich składowych, w tym opcji passe-partout.
Kompleksowe podsumowanie
Wdrożyliśmy szczegółową sekcję podsumowania, która zbiera wszystkie wybrane elementy – w tym ramę, passe-partout, przód oraz tył oprawy. Zapewnia to pełną przejrzystość tuż przed płynnym dodaniem gotowego, spersonalizowanego zestawu do koszyka.
Skalowalna architektura w React
Stworzony w nowoczesnych technologiach jako web-component, moduł cechuje się dużą elastycznością. Przemyślana architektura sprawia, że rozwiązanie jest gotowe do łatwej rozbudowy o kolejne produkty bazujące na logice konfigurowanej ramy.
Typ usługi
W pierwszym kroku wybieramy typ usługi, który chcielibyśmy skonfigurować. Na aktualnym etapie wdrożenia mamy dostępne dwie usługi, tj. rama na wymiar oraz lustro w ramie. W przyszłości konfigurator zostanie rozbudowane o kolejne produkty oprawiane w ramę.
Typ usługi
W pierwszym kroku wybieramy typ usługi, który chcielibyśmy skonfigurować. Na aktualnym etapie wdrożenia mamy dostępne dwie usługi, tj. rama na wymiar oraz lustro w ramie. W przyszłości konfigurator zostanie rozbudowane o kolejne produkty oprawiane w ramę.
Typ wymiaru
Kolejnym krokiem jest określenie typu wymiarów. W celu zapewnienia wygody klientom, udostępnione zostały od 2 do 3 opcji (ilość uzależniona od typu usługi), których konfiguracja na żywo powoduje przeliczenie podsumowania całego produktu.
Typ wymiaru
Kolejnym krokiem jest określenie typu wymiarów. W celu zapewnienia wygody klientom, udostępnione zostały od 2 do 3 opcji (ilość uzależniona od typu usługi), których konfiguracja na żywo powoduje przeliczenie podsumowania całego produktu.
Oprawiana praca
W konfiguratorze mamy możliwość dodania własnej grafiki w celu wyświetlania podglądu pracy w wybranej ramie - dzięki temu klient na żywo widzi personalizowany przez siebie produkt. Konfiguracja materiału, z jakiego wykonana jest praca wpływa na późniejsze kroki, np. wybór konkretnych produktów w kroku z wyborem przodu ramy.
Oprawiana praca
W konfiguratorze mamy możliwość dodania własnej grafiki w celu wyświetlania podglądu pracy w wybranej ramie - dzięki temu klient na żywo widzi personalizowany przez siebie produkt. Konfiguracja materiału, z jakiego wykonana jest praca wpływa na późniejsze kroki, np. wybór konkretnych produktów w kroku z wyborem przodu ramy.
Passe-partout
Następnym krokiem jest konfiguracja passe-partout w jednej z trzech opcji. Dostępne kolory pochodzą bezpośrednio z konfiguracji sklepu.
Passe-partout
Następnym krokiem jest konfiguracja passe-partout w jednej z trzech opcji. Dostępne kolory pochodzą bezpośrednio z konfiguracji sklepu.
Wybór szkła/pleców
Kolejnymi krokami są wybór szkła (przód) oraz pleców (tył) konfigurowanej ramy. Oba elementy są konfigurowalne - wyświetlanie każdej z opcji jest uwarunkowane istnieniem odpowiedniego produktu w systemie. Wyświetlanie poszczególnych opcji jest uwarunkowane spełnianiem warunków dotyczących materiału pracy, czy jej rozmiaru.
Wybór szkła/pleców
Kolejnymi krokami są wybór szkła (przód) oraz pleców (tył) konfigurowanej ramy. Oba elementy są konfigurowalne - wyświetlanie każdej z opcji jest uwarunkowane istnieniem odpowiedniego produktu w systemie. Wyświetlanie poszczególnych opcji jest uwarunkowane spełnianiem warunków dotyczących materiału pracy, czy jej rozmiaru.
Podsumowanie
Ostatnim krokiem jest podsumowanie zawierające informacje na temat wszystkich składowych, które łącznie tworzą finalny produkt ramy. Użytkownik ma możliwość zmiany ilości dodawanego do koszyka skonfigurowanego produktu. Wraz z dodawaniem do koszyka, tworzony jest dokument PDF zawierający specyfikację ramy, na podstawie której wytwarzany jest produkt gotowy do wysyłki.
Podsumowanie
Ostatnim krokiem jest podsumowanie zawierające informacje na temat wszystkich składowych, które łącznie tworzą finalny produkt ramy. Użytkownik ma możliwość zmiany ilości dodawanego do koszyka skonfigurowanego produktu. Wraz z dodawaniem do koszyka, tworzony jest dokument PDF zawierający specyfikację ramy, na podstawie której wytwarzany jest produkt gotowy do wysyłki.
Thanks for watching!
www.webjaksklep.eu
inny projekt, który może Cię zainteresować
- Tryb wyświetlania sekcji z projektami:
- Modyfikuj portfolio:
- Generuj:
- .png