Am construit configuratorul interactiv de verighete Teilor — un wizard în cinci pași unde clienții își proiectează inelele în timp real cu vizualizare 3D, aleg materiale și pietre prețioase, își calculează mărimea exactă a inelului și văd prețurile actualizându-se live cu fiecare selecție.
Provocarea
Teilor trebuia să aducă experiența premium de cumpărare a verighetelor online fără a pierde sentimentul tactil și personalizat al unei consultații în magazin. Clienții trebuiau să configureze inele pe mai multe dimensiuni — model, mărime, lățime, tip de metal, finisaj, selecția pietrelor, montură și gravură personalizată — fiecare combinație afectând prețul în timp real. Configuratorul trebuia să suporte trei moduri de cumpărare: verighete identice pentru ambii parteneri, verighete diferite pentru fiecare, sau achiziția unui singur inel. Pe lângă asta, aplicația avea nevoie de un toolkit integrat de măsurare a inelelor pentru ca clienții să-și determine mărimea acasă, un vizualizator 3D care redă inelul configurat live pe măsură ce selecțiile se schimbă, și integrare completă cu sistemul ERP Opal al Teilor pentru inventar și prețuri în timp real. Totul în română și engleză, cu conturi de clienți care poartă niveluri de discount personalizate separat pentru aur și diamante.
Soluția noastră
Am construit configuratorul ca o aplicație single-page pe Quasar 2 cu Vue 3 și TypeScript, folosind Pinia pentru gestionarea stării într-un wizard complex cu mai mulți pași. Fluxul de configurare în cinci etape ghidează clienții prin selecția modelului, măsurarea inelului cu un toolkit integrat de dimensionare, alegerea materialului și finisajului, selecția pietrelor cu atribute configurabile și gravura personalizată — fiecare pas sincronizat în timp real cu un vizualizator 3D alimentat de WebGi care redă inelul live pe măsură ce selecțiile se schimbă. Prețurile se actualizează dinamic la fiecare interacțiune printr-un API dedicat de calcul al prețurilor care descompune separat costurile materialelor și ale pietrelor, aplicând niveluri de discount personalizate per client. Aplicația se integrează cu backend-ul ERP Opal al Teilor printr-un strat REST API care gestionează modele, variante de verighete, atribute configurabile, prețuri, comenzi și locații magazine. Vue I18n alimentează localizarea în română și engleză, iar sistemul de conturi clienți suportă înregistrare prin telefon și email cu profiluri de discount stocate. Comenzile persistă prin întreruperi de sesiune și pot fi reluate sau editate în orice moment.
Rezultate
- Am livrat configurator de verighete în cinci pași cu vizualizare 3D în timp real prin WebGi
- Am construit toolkit de dimensionare a inelelor permițând clienților să-și determine mărimea fără a vizita un magazin
- Am proiectat motor de prețuri în timp real cu defalcare separată a costurilor pentru materiale și pietre prețioase
- Am implementat trei moduri de configurare: perechi identice, perechi diferite și achiziție de inel singur
- Am integrat cu ERP-ul Opal al Teilor pentru inventar live, prețuri și gestionarea comenzilor
- Am implementat sistem de conturi clienți cu niveluri personalizate de discount pentru aur și diamante
- Am livrat localizare completă în română și engleză cu formate de prețuri adaptate local