Sempre più spesso ci viene chiesto dai nostri clienti di realizzare dei sistemi che permettano all’utente finale di configurare online un determinato tipo di prodotto, per dare la possibilità di vedere in tempo reale il suo aspetto in una particolare personalizzazione, che sia un sedile a cui è possibile applicare un determinato colore di tessuto, una cucina disponibile in diversi materiali e colori o una porta che possiamo personalizzare con diversi tipi di maniglia.
Data l’eterogeneità delle esigenze di ogni cliente, è impossibile utilizzare una soluzione standard e generica che aderisca in pieno agli obiettivi del progetto. con il tempo e l’esperienza, abbiamo selezionato degli strumenti che ci permettono con rapidità di implementare i vari casi d’uso – anche se molto diversi tra loro – in maniera soddisfacente. siamo arrivati a questo risultato utilizzando angularjs, il web application framework sviluppato e mantenuto da google, che ci ha aiutato a creare una single page application in html+css+javascript.
Un caso in cui lo abbiamo utilizzato è il configuratore di calzature DIS in cui un utente può personalizzare ogni singola parte di una scarpa e vedere subito il risultato, da diverse angolature.
Con la stessa logica abbiamo realizzato un’area del sito winxclub in cui gli utenti registrati possono personalizzare il loro web avatar, modificandone gli occhi, i capelli, il set di vestiti e altri accessori.
In entrambi i casi c’è stata una forte integrazione del configuratore con il backend del sito web attraverso l’utilizzo di servizi REST: nel caso di DIS, una volta terminata la personalizzazione della scarpa, l’utente può effettuare l’acquisto direttamente dal sito (grazie all’integrazione con drupal commerce); per il web avatar di winxclub, sono gli amministratori del sito a gestire da backend i singoli oggetti del guardaroba, in questo caso abbiamo legato al configuratore anche un sistema di in-app purchase, che permette l’acquisto di un item attraverso una moneta virtuale utilizzata all’interno del sito.
Sono due casi d’uso totalmente differenti, ma che siamo riusciti ad astrarre e gestire in maniera semplice proprio grazie ad angularjs. Se vuoi saperne di più o anche tu vuoi realizzare un configuratore online per il tuo prodotto, contattaci.
