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.
Notare che si può "estendere" una sezione (in questo caso "billing") senza dover per forza riscrivere tutto il blocco.
L'homepage è arricchita da un'animazione (fatta con GSAP) che allo scroll dell'utente sovrappone delle foto ad un testo di presentazione. Un modo alternativo di visualizzare una panoramica dei prodotti.
Ogni trancio ha il proprio spazio, un "pesce stilizzato" e uno slogan.
Non è il classico e-commerce dove tutti i prodotti hanno lo stesso peso e sono presentati ad elenco.
Il delivery ha i piatti cliccabili e ordinabili. Volendo si possono scaricare anche i menu in PDF.
Il tutto è gestibile e riordinabile nel layout tramite CMS.
Per il blog ho scelto il nome "La Pinna". Lo stile richiama un fondale marino ed è arricchito da giochi di luce sfumati.
I footer sono due e cambiano a seconda delle pagine. Il richiamo allo "shark" è sempre presente!
Stesso discorso per i template degli articoli. L'admin può scegliere due stili differenti.
il menu mobile ha un'altra animazione e...non mi sono dimenticato lo squalo!
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