Glowsy: konfigurator 3D

Klient

Glowsy - marka personalizowanej biżuterii z grawerem, dla której wcześniej zbudowaliśmy sklep. Konfigurator to kolejny etap współpracy: zastąpił prosty, płaski podgląd obrazkowy.

Wyzwanie

Personalizacja to w tym sklepie cały produkt, a klient kupował ją w ciemno. Płaski podgląd obrazkowy nie pokazywał, jak grawer realnie ułoży się na bryle, więc przed zakupem zostawała niepewność, a po zakupie ryzyko reklamacji. Do tego każdy kolejny produkt oznaczał dokładanie kolejnego wariantu interfejsu, a dane graweru trzeba było przekazać do pracowni w formie, której nie da się zinterpretować dwuznacznie.

Porównanie

Widok 1

Widok 2

Rozwiązanie

Zbudowaliśmy konfigurator od zera jako aplikację jednostronicową wpiętą w WooCommerce. (1) Podgląd 3D na Three.js: model .glb z nazwanymi strefami graweru, tekst i ikony renderowane przez canvas do tekstur i nakładane na te strefy, z kalibracją pozycji, krzywizny i głębi, żeby grawer leżał na bryle realistycznie. (2) Kreator dawkuje decyzje pojedynczo, zamiast zasypywać jednym formularzem: grawer z przodu, pytanie o tył, czcionka, pakowanie. Wybór graweru dwustronnego dokłada krok w locie. (3) Silnik konfiguracyjny: każdy produkt to definicja opisująca pola, model, cennik i presety, więc kolejny produkt dodaje się definicją, a nie przepisywaniem interfejsu. (4) Cena liczona podwójnie, w podglądzie i wiążąco na serwerze, na tych samych regułach, żeby klient nigdy nie zobaczył innej kwoty niż zapłaci. (5) Konfiguracja trafia do pozycji zamówienia w formie czytelnej dla grawerni: tekst, ikona z pozycją, strona. Do tego cofanie zmian, zapis projektu na koncie i udostępnianie konfiguracji linkiem.

Zakres prac