E-commerce statici per piccole imprese

Il lockdown ha messo in risalto l’importanza di avere una presenza online, molte attività commerciali a rischio chiusura si sono adeguate e hanno trovato soluzioni più o meno creative per continuare la propria attività online. Le richieste di eCommerce sono aumentate, con l’esigenza principale di averlo nel più breve tempo possibile e ad un costo adeguato.

Tuttavia, lato sviluppo, non esistono soluzioni snelle ed economiche per costruire un eCommerce, per una serie di fattori come la scelta del server, la scelta del CMS o la costruzione di una soluzione ad hoc, eccetera. Tra sviluppo backend e sviluppo frontend se ne vanno mesi di lavoro.

Back-end

Sarebbe il “dietro le quinte” del sito e quindi tutto quello che fa funzionare l’interfaccia, ma che l’utente non vede.

I CMS tradizionali, detti anche monolitici, sono sistemi software che includono tutto, sono installati su un server e hanno un singolo contesto di presentazione dei dati, le pagine web, che vengono realizzate creando una connessione al database e facendo delle interrogazioni ad esso per recuperare i dati necessari.

Un Headless CMS è un sistema di gestione dei contenuti che rende il contenuto accessibile tramite un’API RESTful per la visualizzazione su qualsiasi dispositivo.

Esistono numerosi CMS con questo stack:

Molti di questi sono offerti come Software as a Service, quindi l’editore dei contenuti dovrà loggarsi in una di queste web application e i dati vengono conservati su un back-end Cloud. Altri possono essere installati sul proprio server.

Esistono inoltre generatori di siti statici come:

Casi di utilizzo di un CMS Headless

  • Siti web
  • Web applications che usano Frameworks Javascript come React, Vue.js, Next.js, Angular, Nuxt.js, Gatsby
  • Native Mobile Applications
  • eCommerce

Front-end

Il front end è la parte visibile del sito, l’interfaccia attraverso la quale navighiamo, vediamo foto e video, leggiamo testi o svolgiamo altre attività.

In un sistema monolitico, il front-end è legato al back-end e devono risiedere entrambi nello stesso posto.

In un sistema Headless, front-end e back-end comunicano tramite endpoints. Possono quindi risiedere su server diversi ed essere ottimizzati per i loro rispettivi compiti.

Separare front-end e back-end permette maggiore flessibilità nella presentazione dei dati, e permette l’utilizzo di tecnologie moderne come ReactJS, Vue o Angular.
Altro vantaggio, aumenta la sicurezza perché il backend è ancora più nascosto al pubblico.

Per quanto riguarda gli eCommerce, si può fare uso di servizi di terze parti a cui viene delegata la gestione del carrello e dei pagamenti. Uno di questi è https://snipcart.com/

Snipcart for small business ecommerce
https://snipcart.com/

Snipcart è una di quelle soluzioni che consentono di integrare velocemente nel proprio sito un carrello elettronico, indipendentemente dalla piattaforma e linguaggio di programmazione utilizzati.

Quindi si integra perfettamente sia su un CMS tradizione che un CMS Headless, oppure su un sito statico.

È completamente personalizzabile e responsive. Utilizzando Snipcart hai accesso ad un carrello elettronico in HTML/CSS, iniettato direttamente nel tuo sito web. In pratica puoi trasformare qualsiasi link in un bottone di acquisto visibile nella tua pagina dei prodotti. Questi bottoni fanno comparire il carrello elettronico. Il carrello può essere personalizzato in base alla grafica del sito, e i clienti non abbandonano mai il tuo sito web. Il catalogo dei prodotti e i prodotti continuano ad essere gestiti dal tuo CMS o generatore di siti statici. Il pannello di amministrazione del carrello elettronico è ospitato su Snipcart e il proprietario del sito, facendo login, può configurare il suo account e monitorare le vendite, pagamenti e spedizioni e gestire l’inventario dei prodotti. In sostanza, per utilizzare Snipcart è richiesta una minima conoscenza di HTML e CSS.

Ovviamente non è una soluzione adatta a tutte le esigenze, ma può essere un’ottima soluzione per quei commercianti che hanno bisogno velocemente di un carrello elettronico sul proprio sito web.

Ho preparato un esempio di sito statico in html + snipcart raggiungibile a questo url: https://ecommercestatic.netlify.app/index.html

Il template HTML è preso da https://www.free-css.com/free-css-templates/page193/bootstrap-restaurant

Pubblicato da Roberto Di Marco

Sviluppatore di temi e plugin per Wordpress. Ho una laurea in Psicologia, che mi ha spinto ad interessarmi agli aspetti legati all'usabilità e all'esperienza d'uso dei prodotti digitali.