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.

wqwq w

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

Cominciamo parlando dello shop. Perchè usare Snipcart e non una soluzione più "classica"?

wqwq w


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).

La personalizzazione di Snipcart

wqwq w


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.

carbon-(1).png

Notare che si può "estendere" una sezione (in questo caso "billing") senza dover per forza riscrivere tutto il blocco.

I dettagli sono tutto!

wqwq w

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.

bresaola.jpg

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.

delivery.jpg

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.

blog.jpg

Per il blog ho scelto il nome "La Pinna". Lo stile richiama un fondale marino ed è arricchito da giochi di luce sfumati.

footer.jpg

I footer sono due e cambiano a seconda delle pagine. Il richiamo allo "shark" è sempre presente!

blog2.jpg

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!

wqwq w

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