Il gol del progetto era creare una nuova immagine online per il ristorante Shark, qualcosa che coniugasse lo spirito fresco e moderno del locale con delle funzionalità di shop online moderne e non vincolanti a livello di interfaccia utente. Ecco come è andata.
Shark è un celebre locale del centro di Prato dove si consumano aperitivi alla moda insieme a dell'ottimo street food di pesce (e c'è un po' di tutto, si va dal crudo alle poké fino alla tartare).
Il tutto stando seduti davanti al castello dell'Imperatore (ma quanto è bello di notte?).
L'obiettivo che avevo in mente era quello di costruire un motore totalmente personalizzato per il sito in grado di far risaltare l'immagine del ristorante e il nuovo shop multiprodotto (il ristorante propone sia tranci di pesce che delivery sul comune di Prato).
Questo è lo stack tecnico che ho scelto per il progetto:
cms
Statamic
css
Tailwind CSS
js
Alpine Js
shop
Snipcart
animation
GSAP
tests
Cypress
automation
Zapier
deploy
Ploi
form
Getform
Premessa: Snipcart è un motore headless per e-commerce. Non si installa, non necessita di un database e non va configurato sul proprio server. Basta una riga di codice da copia/incollare ed è subito pronto all'uso.
I motori classici di e-commerce richiedono che il sito sia sviluppato in un determinato modo o usi un linguaggio di programmazione (o di template) specifico per l'occorrenza. Troppi vincoli e troppe scelte obbligate.
Con Snipcart invece questo non accade. Il layout è totalmente personalizzabile e l'integrazione base richiede soltanto la creazione di alcuni pulsanti html (che passano le variabili, come prezzo e dimensione, a Snipcart).
Si tratta di uno strumento estremamente flessibile che permette di essere liberi a livello di programmazione (oltre ad offrire tante funzionalità e sicurezza).
Ovviamente Snipcart è un prodotto "globale", si deve adattare agli shop di tutto il mondo.
Ciò significa che di partenza non mostra campi "italiani" come codice fiscale o partita iva ma permette di integrarli sviluppando del codice ad hoc.
Fortunatamente la parte di template è abbastanza semplice. Quindi, se siete arrivati a questa pagina da Google sappiate che nella documentazione del motore trovate tutti gli esempi di questo mondo per aggiungere custom fields all'esperienza di vendita.
E poi ci sono tanti altri dettagli interessanti:
tutti i testi del sito (ma proprio tutti) sono gestibili dal cliente in autonomia tramite il CMS
nel menu desktop, i separatori tra le voci, sono stati estrapolati dalla "K" del logo
i titoli delle varie pagine sono colorati con un gradiente
il form è headless (fatto con Getform!)
con Zapier invece ho creato delle automazioni in base ai webhook inviati da Snipcart. Così ad esempio, se l'utente scegli di iscriversi alla newsletter (mentre fa un'ordine) riesco ad iscriverlo (o aggiornarlo) su Mailchimp.
Ti è piaciuto il progetto?
Se hai voglia di lavorare insieme o vuoi contattarmi per una consulenza puoi scrivermi su [email protected]
Disponibilità attuale per nuovi progetti
© 2023, Francesco Mugnai