Diario di Sviluppo: Deltottica Ecommerce Website

Nell’articolo di oggi voglio presentarvi un diario di sviluppo che illustra le varie fasi e scelte adottate per il mio ultimo progetto ecommerce.

Panoramica progettuale

Descrizione: Il sito è un ecommerce dove vengono vendute montature (da sole e da vista) a prezzi scontati per uomo e donna. Oltre all’ecommerce “normale” il cliente ha chiesto la possibilità ovviamente di aggiungere sconti tramite coupon code e la geo-traduzione automatica in base al paese di provenienza del visitatore. Tra le esigenze del cliente (oltre a vendere ovviamente) vi era poi la necessità di valorizzare i brand inseriti per farli conoscere al grande pubblico.

Budget: richiedimelo tramite mail. 

Link: http://deltottica.com/

Caratteristiche: Geo-location, FULL HTML5/CSS3, jQuery/Ajax, PHP/PDO Backend, Gestione completa ecommerce.

Sviluppo Backend personalizzato

Diciamo che la prima settimana si è svolta tra mille imprevisti dovuti ad altri progetti (come sempre del resto =D). Per fortuna sono comunque riuscito ad andare avanti in maniera ottimale nella tabella di marcia. Per prima cosa mi sono dedicato allo studio del database, un passo fondamentale per rendere l’applicativo davvero stabile e facilmente aggiornabile per il futuro. Per farlo vi consiglio di usare il mio metodo: la cara e vecchia “carta e penna” non delude mai 😉

Una volta strutturato il database ho iniziato a stendere il mio “foglio di sviluppo”. La chiamo così perchè è da quando ho iniziato la mia modesta carriera lavorativa che la stendo (ovviamente sempre su carta). Il “foglio” è dove vado a programmare tutto il pattern di programmazione che ho adottato per quella determinata applicazione per rendere il tutto più ordinato e preciso prima di stendere l’applicazione sotto forma di codice vero e proprio. Oltre ad aiutarmi nei passi successivi (e quindi i passi di developing duro e crudo), il foglio di sviluppo mi servirà poi in futuro per aggiornare,estendere e modificare l’applicativo. Senza quest’ultimo infatti dovrei perdere tempo a  ri-analizzarmi tutto il progetto, in questo modo invece ho da subito un colpo d’occhi panoramico della mia applicazione.

Nella parte finale della settimana, dopo tutte queste (doverose) fasi di studio ho iniziato a stendere lo scheletro del CMS, partendo ovviamente dal backend. Come avevo già accennato in qualche articolo, avere una “base” cms solida fa risparmiare molto tempo a dispetto di quanto si pensi. In poco più di 2 giorni sono stato in grado infatti di creare la struttura completa della tabella del sito e di creare di fatto tutte le sezioni del backend. Oltre a questo grazie ai primi giorni dedicati allo studio, sono riuscito anche ad imbastire la prima bozza dei moduli di aggiunta e di visualizzazione del backend. Tutto questo tuttavia non sarebbe stato possibile senza avere alle spalle un CMS modulare “solido”. Qui troverai maggiori informazioni a riguardo.

Ah, quasi dimenticavo una precisazione: il pattern adottato è di tipo MVC (Model View Controller).

Frontend e UX

Una volta creato il “motore” infrastrutturale del backend sono passato al coding del front. Il sito si basa sul noto e popolare framework di sviluppo “bootstrap” che mi ha permesso di accorciare notevolmente i tempi di sviluppo del frontend.

Come avrete modo di notare il cliente ha voluto un design molto minimal and clean con una cura dei dettagli pressochè perfetta. Anche le foto dei vari prodotti (curate e inserite da lui) sono state scontornate con un ribilanciamento di colore in modo da evitare l’effetto “alone” attorno allo scatto e rendere la foto piacevolmente “bianca”.

La pagina “designers” è stata creata con un design diverso per mettere in evidenza alcune marche trattate (e relativa “storia” del brand) al fine di farle conoscere meglio al pubblico.

Dal punto di vista SEO come avrete modo di notare il pattern MVC funziona a meraviglia. Tutto il seo è auto-generato. Il focus dell’amministratore del sito è solo sui contenuti. Ecco alcune caratteristiche:

– Permalink auto-generati in base al titolo.

– Seo Description Auto-generato con excerpt della descrizione e filtraggio caratteri (HTML etc).

– Nuovissimi tag Open Graph (facebook) auto-generati.

– Possibilità di amministrare praticamente tutto il seo direttamente dal pannello di controllo (home, categorie etc).

Caratteristiche Ecommerce

Il sito possiede un ecommerce a mio parere davvero unico. Il tutto è stato progettato in Ajax per rendere minimi i caricamenti e rendere l’acquisto VELOCE e IMMEDIATO. Quando si sviluppa un ecommerce penso che questo sia un fattore determinante: gli acquisti sul web sono sempre più “d’impulso” pertanto è importante rendere il checkout e l’acquisto rapido e veloce. Come avrete modo di notare tutto il checkout (codici sconto, calcolo spese di spedizione, verifica campi anagrafica etc), è stato sviluppato in questo senso.

Una cosa estremamente interessante che ho avuto modo di approfondire sono sicuramente le api di Paypal. Lo studio non è stato certamente in discesa…anzi. Devo dire che la documentazione ufficiale non è delle migliori. Tuttavia sono riuscito a realizzare l’acquisto secondo il nuovo standard IPN Paypal che permette il redirect automatico su una pagina di atterraggio a mia scelta una volta che l’utente ha processato l’acquisto. Molto utile per le prove e i test è sicuramente la modalità Sandbox che permette di creare un amministratore e un cliente immaginario da usare come test.

Una volta acquistato il prodotto vengono generate due email di riepilogo: una di conferma ordine, e una utile al login utente. Per accedere al proprio pannello utente il cliente deve cliccare sul link inviato tramite mail e usare la password alfanumerica auto-generata al fine di rendere più sicuro il suo account. Ovviamente è stato usato anche un modulo di recupero account nel caso l’utente smarrisse la password.

Backend amministratore e backend cliente sono perfettamente comunicanti: quando l’amministratore cambia nel suo pannello lo stato dell’ordine viene auto-generata una mail informativa al cliente che lo avverte che il suo ordine sta andando avanti ed è stato processato /spedito. Questo permette di velocizzare lo smaltimento degli ordini e rendere il tutto più “comodo”.

Conclusioni

Il progetto non è concluso anzi, tra le cose da fare c’è sicuramente la versione internazionale (en) e il blog dove il cliente andrà inserire inspiration e consigli utili sul mondo dell’eyewear. Tutto questo senza contare tutta la fase marketing (campagne promozionali, Seo etc) che stanno iniziando in questi giorni.

Vuoi un preventivo per creare il tuo negozio online? CONTATTAMI

Ti è piaciuta l’idea del diario di sviluppo? Condividila sui tuoi social network preferiti!