L’approccio e-commerce headless è diventato sempre più popolare negli ultimi anni, soprattutto nei sistemi e-commerce più grandi e complessi. È vero che richiede un po’ più di lavoro e di riflessione all’inizio del progetto, ma a lungo termine un’architettura di questo tipo può rivelarsi molto vantaggiosa.
Nell’approccio headless, l’interfaccia utente (front-end) è completamente separata dal sistema di back-end. La comunicazione tra il front-end (storefront) e il back-end avviene esclusivamente tramite API. Questo tipo di configurazione consente una minore complessità del codice, una migliore modularità, una “single source of truth” e una più semplice suddivisione del sistema in microservizi.
I principali vantaggi dell’architettura e-commerce headless sono:
- migliore scalabilità,
- maggiore flessibilità nella sostituzione o nell’aggiornamento delle singole piattaforme,
- connessione diretta con i sistemi di back-end come ERP, PIM, CRM e strumenti di marketing, senza duplicazione dei dati,
- collegamento più semplice di ulteriori sistemi di back-end o di altri servizi di terze parti..
Come iniziare e impostare un progetto e-commerce headless?
Per prima cosa è necessario riflettere su quali piattaforme o sistemi di back-end siano necessari per il progetto, in modo da coprire l’intero processo e-commerce.
L’aspetto fondamentale è l’architettura del progetto e l’interconnessione delle piattaforme in un unico storefront, ovvero front-end.
Di seguito sono riportati alcuni insiemi di contenuti o dati di base che ogni sistema di e-commerce deve includere e sui quali è opportuno riflettere in anticipo.
1. Origine dei prodotti
Sarà la piattaforma e-commerce o la piattaforma PIM? Una connessione diretta con l’ERP per la visualizzazione dei prodotti di solito non è la soluzione più sensata, poiché la maggior parte dei sistemi ERP non dispone di funzionalità per descrizioni dei prodotti, immagini, attributi tecnici, ecc.
Nella maggior parte dei progetti e-commerce headless è comunque necessario creare almeno gli anagrafici (SKU) sulla piattaforma e-commerce, in modo da poter elaborare gli ordini. La maggior parte delle piattaforme e-commerce, infatti, ha bisogno di anagrafici (SKU) e prezzi attivi per poter elaborare correttamente un ordine.
Ciò nonostante, sul front-end è possibile recuperare dati come immagini, descrizioni e attributi direttamente da altri sistemi di back-end.
2. Origine dell magazzino prodotti
È opportuno recuperare le giacenze direttamente dall’ERP tramite l’API dell’ERP, cosa che oggi la maggior parte dei sistemi ERP consente già. In questo modo si mantiene la “single source of truth” per le giacenze.
3. Origine dei prezzi
In alcuni progetti la politica dei prezzi è molto complessa, in particolare nel segmento B2B, dove ogni cliente può avere un proprio prezzo per ciascun prodotto. In questi casi è opportuno valutare un collegamento via API direttamente con l’ERP per la visualizzazione e il calcolo finale dei prezzi.
Magento, ad esempio, consente di registrare prezzi finali “custom” sull’ordine, anche se questi non vengono memorizzati in modo permanente sulla piattaforma.
Se l’ERP non offre un’API per il calcolo o la visualizzazione dei prezzi oppure se la politica dei prezzi è semplice, i prezzi possono essere trasferiti sulla piattaforma e-commerce. In questo caso, però, è necessario riflettere attentamente sull’aggiornamento dei prezzi, soprattutto in presenza di promozioni.
4. Piattaforma per la base utenti e l’elaborazione degli acquisti
Nella maggior parte dei casi è preferibile utilizzare la piattaforma e-commerce per la gestione della base utenti e degli acquisti. Essa serve per:
- la registrazione dei clienti,
- la memorizzazione dei dati di base,
- l’accesso (login) dei clienti.
È inoltre opportuno utilizzare la piattaforma e-commerce per l’elaborazione degli acquisti (memorizzazione degli ordini e dei relativi dati).
La piattaforma e-commerce è di solito anche la scelta più sensata per il collegamento con i payment e shipping provider, dato che per le piattaforme più diffuse sono già disponibili moduli pronti.
5. Editor CMS
La piattaforma per la gestione dei contenuti, ovvero delle pagine statiche, può essere separata (piattaforme CMS in cloud) oppure integrata nella piattaforma e-commerce. Consente la creazione di pagine statiche e di landing page promozionali avanzate, con la possibilità di utilizzare componenti drag & drop per la visualizzazione di prodotti, banner, ecc.
6. Search e filtraggio nelle categorie
È necessario riflettere sul motore di ricerca principale e sul filtraggio dei prodotti nella pagina di categoria (layered navigation, ovvero facets).
La soluzione più semplice ed economica è l’utilizzo del motore di ricerca e del filtraggio già integrati nella piattaforma e-commerce. La maggior parte delle piattaforme e-commerce più diffuse, infatti, lo consente. In tal caso è necessario trasferire sulla piattaforma web i dati di base dei prodotti, come nome e attributi tecnici, che vengono poi utilizzati per il filtraggio.
A dire il vero, però, talvolta le piattaforme e-commerce non sono la soluzione migliore per la ricerca dei prodotti, ovvero per il motore di ricerca.
Se il budget lo consente, è opportuno valutare l’utilizzo di provider di terze parti per il motore di ricerca e il merchandising, come ad esempio NOSTO o Algolia. Questi provider integrano algoritmi più avanzati per il motore di ricerca, intelligenza artificiale e anche personalizzazione.
Entrambi i provider, sia NOSTO sia Algolia, consentono tramite API una ricerca avanzata dei prodotti e anche il merchandising, con cui si copre la visualizzazione dei prodotti in categoria e il filtraggio (facets) nelle categorie.
Quando è opportuno adottare l’approccio Headless E-Commerce?
L’e-commerce headless non è la scelta giusta per ogni progetto. Ha più senso nei sistemi più grandi e più complessi, dove sullo sfondo sono presenti più sistemi di back-end e si vuole mantenere una “single source of truth”.
Spesso non si vogliono trasferire dati provenienti da sistemi diversi su un’unica piattaforma e-commerce, dato che ciò può rapidamente portare a incongruenze nei dati.
Tale approccio è sensato anche quando il budget consente un’architettura più moderna, in cui il progetto è suddiviso in microservizi.
Un ulteriore vantaggio di questo approccio è la maggiore facilità nello sviluppo di un’app mobile aggiuntiva, dato che il negozio online e l’app mobile possono utilizzare gli stessi endpoint API.
In quali casi questo approccio dà ottimi risultati?
- Visualizzazione diretta dello stock dall’ERP tramite API. Non è necessario sincronizzare lo stock sulla piattaforma e-commerce, dato che il front-end può visualizzarle in tempo reale tramite API.
- Visualizzazione di immagini e contenuti video dei prodotti direttamente dal PIM. Non è necessario sincronizzare le immagini sulla piattaforma e-commerce, dato che sul front-end possono essere visualizzate tramite API o link statici (URL).
- Integrazione diretta con strumenti di marketing / newsletter. L’iscrizione alle newsletter o ad altri database di marketing avviene direttamente tramite API, senza necessità di sincronizzazioni aggiuntive.
Framework front-end headless
La sfida più grande dell’approccio headless non è l’integrazione con le API, ma la corretta impostazione dell’architettura di front-end.
Molti interpretano l’headless come una “single page application”, ma si tratta di una visione troppo semplicistica. Nei sistemi e-commerce headless si utilizza di norma una combinazione di:
- SSR (Server-Side Rendering) – per le pagine rilevanti per la SEO (product, category),
- SSG (Static Site Generation) – per i contenuti statici,
- ISR (Incremental Static Regeneration) – per le pagine dinamiche ma cache-abili.
Routing e gestione degli URL
Nelle classiche piattaforme monolitiche gli URL vengono gestiti dalla piattaforma stessa.
Nell’architettura headless, invece, il routing è interamente di competenza del front-end. Questo aspetto è inoltre molto importante dal punto di vista SEO.
Ciò significa che il front-end deve gestire:
- la generazione dinamica degli URL dei prodotti,
- la struttura del category tree,
- il filtraggio e la paginazione,
- gli URL canonici,
- i tag hreflang per il multilingua,
- i metadati SEO.
Gestione dello stato (cart, session, autenticazione)
Dato che il front-end non è più legato alla classica sessione PHP, è necessario gestire manualmente, ovvero tramite JS:
- la customer authentication (JWT o customer token tramite GraphQL),
- il cart ID,
- la distinzione tra utenti guest e registered,
- la sincronizzazione del carrello,
- il ripristino della session.
Uilizzo di framework front-end / storefront preconfezionati
Sono disponibili anche framework front-end prefatti per l’e-commerce headless. Di seguito ne presento i due più diffusi, che sono al passo con i tempi e con le tecnologie moderne.
GraphCommerce
🔗 https://www.graphcommerce.org/
GraphCommerce è una delle migliori soluzioni out-of-the-box per Magento headless:
- basato su React + Next.js,
- routing e URL management già integrati,
- alcuni layout grafici / template già predisposti,
- logiche già pronte per:
- product page,
- category page,
- cart,
- checkout,
- integrazione con il CMS Hygraph,
- ottimo Core Web Vitals score (80+ su mobile già di base).
VueStorefront
🔗 https://github.com/vuestorefront/vue-storefront
Vue Storefront (oggi Alokai) supporta:
- stack VueJS e React
- Alokai Theme già pronto – template con tutti i componenti e-commerce
- integrazione con Magento 2.
Svantaggi:
- VueJS sta perdendo popolarità,
- dubbi sul supporto a lungo termine e sulla disponibilità di sviluppatori con stack VueJS.
Resta comunque una buona scelta per i team che già padroneggiano Vue.
Soluzione custom per il front-end
È possibile anche realizzare una soluzione completamente custom. Questo approccio consente di scegliere il proprio stack di sviluppo. Attualmente per progetti di questo tipo i più diffusi sono React e Next.js.
Il vantaggio di questo approccio è la totale flessibilità in fase di sviluppo: il front-end può essere realizzato secondo le proprie valutazioni e i propri requisiti.
Lo svantaggio è invece la necessità di un notevole lavoro di sviluppo per il routing, la struttura degli URL, la SEO, ecc., così come per tutta la logica e-commerce (cart, checkout, error handling).
Tale approccio è sensato soprattutto per progetti con budget più elevati e tempistiche flessibili.
CMS editors per l’approccio headless
L’approccio headless consente l’integrazione di editor CMS di terze parti più avanzati. In questo modo non si è limitati ai soli CMS integrati, come avviene nel classico approccio monolitico, ma si può scegliere tra un’ampia gamma di piattaforme CMS dedicate che supportano l’integrazione tramite API.
Questi editor CMS sono spesso più avanzati e consentono una gestione dei contenuti più semplice e una migliore preparazione di campagne di marketing, ovvero di landing page.
Il vostro team di marketing ve ne sarà molto grato.
Hypergraph
Hygraph è un CMS headless basato su GraphQL, che si integra molto bene con i moderni framework front-end tramite API.
Consente di:
- creare categorie, pagine statiche e landing page,
- supportare il Routing / URL.
- gestire i contenuti in modo strutturato,
- utilizzare numerosi componenti e widget già pronti (banner, sezioni hero, CTA …),
- comporre le pagine tramite logica drag & drop.
Un’ottima base per l’integrazione con Magento è GraphCommerce, che dispone già di un’integrazione pronta con Hygraph.
Prismic
Anche Prismic è un CMS headless molto popolare, che consente la connessione al front-end tramite API.
I principali vantaggi di Prismic:
- Slice-based content model – i contenuti vengono composti tramite “slice” modulari, il che consente una costruzione delle pagine estremamente flessibile.
- Ottimo supporto per Next.js, aspetto importante in soluzioni come GraphCommerce o storefront custom.
- Semplice integrazione con l’API GraphQL di Magento.
- Costruzione delle pagine secondo il principio drag & drop
- Consente inoltre la realizzazione di product page e category page con supporto al routing.
Contentful
Anche Contentful è un editor CMS headless molto diffuso, sebbene forse leggermente più orientato al segmento enterprise, ovvero a grandi organizzazioni / progetti.
Vantaggi di Contentful:
- ottimo supporto per team di grandi dimensioni, gestione dei diritti di accesso e workflow,
- eccellente supporto API (GraphQL + REST),
- adatto a sistemi e-commerce grandi, multilingua e multi-brand.
Come si comporta Magento nei progetti e-commerce headless?
Magento 2 dispone di un’ottima predisposizione e, in generale, di un buon ecosistema per l’approccio headless.
Sono disponibili API REST e GraphQL praticamente per tutti i processi e-commerce: prodotti, categorie, filtri, carrello, session handling, ecc.
Per l’implementazione headless è consigliato l’utilizzo delle API GraphQL, dato che consentono di recuperare solo i dati desiderati e non l’intero oggetto, riducendo notevolmente la quantità di dati scambiati e aumentando la velocità.
Magento 2 dispone inoltre di un caching integrato per GraphQL, che migliora le prestazioni e riduce il carico sul server.
Per Magento 2 sono inoltre disponibili framework storefront come GraphCommerce e VueStorefront, che velocizzano notevolmente l’esecuzione del progetto.
Checkout
Una delle sfide chiave in un progetto e-commerce headless è l’implementazione del checkout.
Come approcciare l’implementazione del processo di checkout?
Storefront come GraphCommerce o Vue Storefront offrono già il supporto per il checkout e per i payment provider più diffusi, il che facilita notevolmente lo sviluppo.
Nel caso in cui si desideri integrare payment provider meno diffusi o sloveni, come Bankart, Leanpay e simili, spesso non è disponibile un supporto headless. In questi casi è necessario sviluppare un’integrazione custom, ovvero un supporto dedicato per tali provider di pagamento.
Vale la pena valutare anche la possibilità di un fallback al cart e al checkout predefiniti (default) messi a disposizione dalla piattaforma e-commerce.
In questo caso l’utente viene reindirizzato al processo di cart + checkout default del ecommerce. In questo modo è possibile utilizzare il meccanismo di checkout già integrato della piattaforma e-commerce in uso e sfruttare i moduli di terze parti esistenti per i provider di shipping e di payment.
Va però gestito adeguatamente il trasferimento della sessione utente (session) e dei prodotti, ovvero del carrello, verso il checkout e-commerce predefinito.
Servizi esterni (3th party) per catalog, merchandising e related products
Nell’approccio headless è opportuno valutare anche l’utilizzo, ovvero l’integrazione, di provider “cloud” per search e catalog.
Si tratta di provider specializzati che offrono soluzioni dedicate per:
- Motore di ricerca
- Catalog (pagina di categoria con filtraggio, ovvero facets).
- Merchandising
- Personalizzazione dell’esperienza utente
- Auto related
- Integrazione dell’AI per la correlazione dei prodotti
Tali provider dispongono di algoritmi sensibilmente più sofisticati per queste funzionalità. In particolare emergono i benefici dell’utilizzo dell’intelligenza artificiale e della personalizzazione, che possono migliorare in modo significativo i tassi di conversione del negozio online.
Vorrei evidenziare due provider – Nosto e Algolia – con i quali abbiamo già collaborato in diversi progetti e che si sono dimostrati molto efficaci.
Va però tenuto presente che si tratta di provider con un canone mensile fisso, il che può incidere in misura non trascurabile sul budget del progetto.
Algolia
Algolia viene utilizzato molto di frequente come:
- search engine primario (con buon supporto per AI, sinonimi, correzione degli errori di battitura, ecc.),
- strumento per il category listing e il filtraggio (facets),
- soluzione per il merchandising,
- piattaforma per la personalizzazione,
- sistema di auto-related con supporto AI e approccio “big data”.
Vantaggi di Algolia nell’approccio headless:
- approccio completamente API-based (JavaScript) sul front-end,
- search estremamente veloce, anche con cataloghi di grandi dimensioni,
- ottimo supporto per React / Next.js,
- faceted search, autocomplete e typo-tolerance avanzati.
Nosto
Nosto è una piattaforma molto simile ad Algolia e offre funzionalità comparabili.
Supporta:
- search engine con supporto AI (sinonimi, correzione degli errori di battitura, auto-learn, ecc.),
- category listing e merchandising,
- personalizzazione dei contenuti,
- related products basati su AI,
- blocchi dinamici e slider,
- A/B testing.
In un contesto headless:
- Nosto funziona come un servizio indipendente,
- il front-end recupera tramite API dati personalizzati,
- non vi è una dipendenza diretta dalla piattaforma e-commerce.
Siete pronti per la nuova generazione dell’e-commerce?
L’e-commerce headless non è semplicemente un aggiornamento tecnico, ma una scelta strategica. Vi consente di costruire un negozio online in modo modulare, scalabile e pronto per il futuro – senza i limiti dei sistemi monolitici. Ogni componente dell’architettura svolgerà il proprio compito.
Questo approccio è particolarmente adatto ad ambienti più complessi, a modelli di vendita multicanale e ad aziende che desiderano una flessibilità tecnologica a lungo termine e la possibilità di adattarsi rapidamente al mercato.
Se state pensando di passare a un’architettura headless o avete bisogno di una consulenza specialistica per la progettazione e lo sviluppo di un progetto di questo tipo, siamo a vostra disposizione con piacere. Vi aiutiamo nella progettazione architetturale, nella scelta delle tecnologie più adatte e nella realizzazione completa di una moderna soluzione e-commerce headless.
Se state pensando di passare a un’architettura headless o avete bisogno di una consulenza specialistica per la progettazione e lo sviluppo di un progetto di questo tipo, siamo a vostra disposizione con piacere.
