{"id":2103,"date":"2026-02-16T09:30:41","date_gmt":"2026-02-16T09:30:41","guid":{"rendered":"https:\/\/www.elitek.si\/come-progettare-ecommerce-headless-architettura-e-implementazione\/"},"modified":"2026-05-20T12:45:22","modified_gmt":"2026-05-20T12:45:22","slug":"come-progettare-ecommerce-headless-architettura-e-implementazione","status":"publish","type":"post","link":"https:\/\/dev-webpage.elitek.si\/it\/come-progettare-ecommerce-headless-architettura-e-implementazione\/","title":{"rendered":"Come progettare un e-commerce headless flessibile e scalabile: dall&#8217;architettura all&#8217;implementazione"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.elitek.si\/wp-content\/uploads\/2026\/02\/headless-ecommerce2.png\" alt=\"\" class=\"wp-image-1940\" style=\"width:100%;height:auto;margin-bottom: 30px;\"\/><\/figure><br\/>\n\n<p>L&#8217;approccio e-commerce headless \u00e8 diventato sempre pi\u00f9 popolare negli ultimi anni, soprattutto nei sistemi e-commerce pi\u00f9 grandi e complessi. \u00c8 vero che richiede un po&#8217; pi\u00f9 di lavoro e di riflessione all&#8217;inizio del progetto, ma a lungo termine un&#8217;architettura di questo tipo pu\u00f2 rivelarsi molto vantaggiosa.<\/p>\n\n<p>Nell&#8217;approccio headless, l&#8217;interfaccia utente (front-end) \u00e8 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\u00e0 del codice, una migliore modularit\u00e0, una \u201csingle source of truth\u201d e una pi\u00f9 semplice suddivisione del sistema in microservizi.<\/p>\n\n<p><strong>I principali vantaggi dell&#8217;architettura e-commerce headless sono:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>migliore scalabilit\u00e0,<\/li>\n\n\n\n<li>maggiore flessibilit\u00e0 nella sostituzione o nell&#8217;aggiornamento delle singole piattaforme,<\/li>\n\n\n\n<li>connessione diretta con i sistemi di back-end come ERP, PIM, CRM e strumenti di marketing, senza duplicazione dei dati,<\/li>\n\n\n\n<li>collegamento pi\u00f9 semplice di ulteriori sistemi di back-end o di altri servizi di terze parti..<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Come iniziare e impostare un progetto e-commerce headless?<\/h2>\n\n<p>Per prima cosa \u00e8 necessario riflettere su quali piattaforme o sistemi di back-end siano necessari per il progetto, in modo da coprire l&#8217;intero processo e-commerce.<\/p>\n\n<p>L&#8217;aspetto fondamentale \u00e8 l&#8217;architettura del progetto e l&#8217;interconnessione delle piattaforme in un unico storefront, ovvero front-end.<\/p>\n\n<p>Di seguito sono riportati alcuni insiemi di contenuti o dati di base che ogni sistema di e-commerce deve includere e sui quali \u00e8 opportuno riflettere in anticipo.<\/p>\n\n<h3 class=\"wp-block-heading\">1. Origine dei prodotti<\/h3>\n\n<p>Sar\u00e0 la piattaforma e-commerce o la piattaforma PIM? Una connessione diretta con l&#8217;ERP per la visualizzazione dei prodotti di solito non \u00e8 la soluzione pi\u00f9 sensata, poich\u00e9 la maggior parte dei sistemi ERP non dispone di funzionalit\u00e0 per descrizioni dei prodotti, immagini, attributi tecnici, ecc.<\/p>\n\n<p>Nella maggior parte dei progetti e-commerce headless \u00e8 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.<\/p>\n\n<p>Ci\u00f2 nonostante, sul front-end \u00e8 possibile recuperare dati come immagini, descrizioni e attributi direttamente da altri sistemi di back-end.<\/p>\n\n<h3 class=\"wp-block-heading\">2. Origine dell magazzino prodotti<\/h3>\n\n<p>\u00c8 opportuno recuperare le giacenze direttamente dall&#8217;ERP tramite l&#8217;API dell&#8217;ERP, cosa che oggi la maggior parte dei sistemi ERP consente gi\u00e0. In questo modo si mantiene la \u201csingle source of truth\u201d per le giacenze.<\/p>\n\n<h3 class=\"wp-block-heading\">3. Origine dei prezzi<\/h3>\n\n<p>In alcuni progetti la politica dei prezzi \u00e8 molto complessa, in particolare nel segmento B2B, dove ogni cliente pu\u00f2 avere un proprio prezzo per ciascun prodotto. In questi casi \u00e8 opportuno valutare un collegamento via API direttamente con l&#8217;ERP per la visualizzazione e il calcolo finale dei prezzi.<\/p>\n\n<p>Magento, ad esempio, consente di registrare prezzi finali \u201ccustom\u201d sull&#8217;ordine, anche se questi non vengono memorizzati in modo permanente sulla piattaforma.<\/p>\n\n<p>Se l&#8217;ERP non offre un&#8217;API per il calcolo o la visualizzazione dei prezzi oppure se la politica dei prezzi \u00e8 semplice, i prezzi possono essere trasferiti sulla piattaforma e-commerce. In questo caso, per\u00f2, \u00e8 necessario riflettere attentamente sull&#8217;aggiornamento dei prezzi, soprattutto in presenza di promozioni.<\/p>\n\n<h3 class=\"wp-block-heading\">4. Piattaforma per la base utenti e l&#8217;elaborazione degli acquisti<\/h3>\n\n<p>Nella maggior parte dei casi \u00e8 preferibile utilizzare la piattaforma e-commerce per la gestione della base utenti e degli acquisti. Essa serve per:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>la registrazione dei clienti,<\/li>\n\n\n\n<li>la memorizzazione dei dati di base,<\/li>\n\n\n\n<li>l&#8217;accesso (login) dei clienti.<\/li>\n<\/ul>\n\n<p>\u00c8 inoltre opportuno utilizzare la piattaforma e-commerce per l&#8217;elaborazione degli acquisti (memorizzazione degli ordini e dei relativi dati).<\/p>\n\n<p>La piattaforma e-commerce \u00e8 di solito anche la scelta pi\u00f9 sensata per il collegamento con i payment e shipping provider, dato che per le piattaforme pi\u00f9 diffuse sono gi\u00e0 disponibili moduli pronti.<\/p>\n\n<h3 class=\"wp-block-heading\">5. Editor CMS<\/h3>\n\n<p>La piattaforma per la gestione dei contenuti, ovvero delle pagine statiche, pu\u00f2 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\u00e0 di utilizzare componenti drag &amp; drop per la visualizzazione di prodotti, banner, ecc.<\/p>\n\n<h3 class=\"wp-block-heading\">6. Search e filtraggio nelle categorie<\/h3>\n\n<p>\u00c8 necessario riflettere sul motore di ricerca principale e sul filtraggio dei prodotti nella pagina di categoria (layered navigation, ovvero facets).<\/p>\n\n<p>La soluzione pi\u00f9 semplice ed economica \u00e8 l&#8217;utilizzo del motore di ricerca e del filtraggio gi\u00e0 integrati nella piattaforma e-commerce. La maggior parte delle piattaforme e-commerce pi\u00f9 diffuse, infatti, lo consente. In tal caso \u00e8 necessario trasferire sulla piattaforma web i dati di base dei prodotti, come nome e attributi tecnici, che vengono poi utilizzati per il filtraggio.<\/p>\n\n<p>A dire il vero, per\u00f2, talvolta le piattaforme e-commerce non sono la soluzione migliore per la ricerca dei prodotti, ovvero per il motore di ricerca.<\/p>\n\n<p>Se il budget lo consente, \u00e8 opportuno valutare l&#8217;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\u00f9 avanzati per il motore di ricerca, intelligenza artificiale e anche personalizzazione.<\/p>\n\n<p>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.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"630\" src=\"https:\/\/www.elitek.si\/wp-content\/uploads\/2026\/02\/grafikon-povezovanja-3.png\" alt=\"\" class=\"wp-image-2097\" srcset=\"https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/grafikon-povezovanja-3.png 1024w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/grafikon-povezovanja-3-300x185.png 300w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/grafikon-povezovanja-3-768x473.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">Quando \u00e8 opportuno adottare l&#8217;approccio Headless E-Commerce?<\/h2>\n\n<p>L&#8217;e-commerce headless non \u00e8 la scelta giusta per ogni progetto. Ha pi\u00f9 senso nei sistemi <strong>pi\u00f9 grandi<\/strong> e <strong>pi\u00f9 complessi<\/strong>, dove sullo sfondo sono presenti pi\u00f9 sistemi di back-end e si vuole mantenere una \u201csingle source of truth\u201d.<\/p>\n\n<p>Spesso non si vogliono trasferire dati provenienti da sistemi diversi su un&#8217;unica piattaforma e-commerce, dato che ci\u00f2 pu\u00f2 rapidamente portare a incongruenze nei dati.<\/p>\n\n<p>Tale approccio \u00e8 sensato anche quando il budget consente un&#8217;architettura pi\u00f9 moderna, in cui il progetto \u00e8 suddiviso in microservizi.<\/p>\n\n<p>Un ulteriore vantaggio di questo approccio \u00e8 la maggiore facilit\u00e0 nello sviluppo di un&#8217;app mobile aggiuntiva, dato che il negozio online e l&#8217;app mobile possono utilizzare gli stessi endpoint API.<\/p>\n\n<p><strong>In quali casi questo approccio d\u00e0 ottimi risultati?<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Visualizzazione diretta dello stock dall&#8217;ERP tramite API.<\/strong> Non \u00e8 necessario sincronizzare lo stock sulla piattaforma e-commerce, dato che il front-end pu\u00f2 visualizzarle in tempo reale tramite API.<\/li>\n\n\n\n<li><strong>Visualizzazione di immagini e contenuti video dei prodotti direttamente dal PIM.<\/strong> Non \u00e8 necessario sincronizzare le immagini sulla piattaforma e-commerce, dato che sul front-end possono essere visualizzate tramite API o link statici (URL).<\/li>\n\n\n\n<li><strong>Integrazione diretta con strumenti di marketing \/ newsletter.<\/strong> L&#8217;iscrizione alle newsletter o ad altri database di marketing avviene direttamente tramite API, senza necessit\u00e0 di sincronizzazioni aggiuntive.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Framework front-end headless<\/h2>\n\n<p>La sfida pi\u00f9 grande dell&#8217;approccio headless non \u00e8 l&#8217;integrazione con le API, ma la corretta impostazione dell&#8217;architettura di front-end.<\/p>\n\n<p>Molti interpretano l&#8217;headless come una \u201csingle page application\u201d, ma si tratta di una visione troppo semplicistica. Nei sistemi e-commerce headless si utilizza di norma una combinazione di:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>SSR (Server-Side Rendering)<\/strong> \u2013 per le pagine rilevanti per la SEO (product, category),<\/li>\n\n\n\n<li><strong>SSG (Static Site Generation)<\/strong> \u2013 per i contenuti statici,<\/li>\n\n\n\n<li><strong>ISR (Incremental Static Regeneration)<\/strong> \u2013 per le pagine dinamiche ma cache-abili.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Routing e gestione degli URL<\/h3>\n\n<p>Nelle classiche piattaforme monolitiche gli URL vengono gestiti dalla piattaforma stessa.<br\/>Nell&#8217;architettura headless, invece, il routing \u00e8 interamente di competenza del front-end. Questo aspetto \u00e8 inoltre molto importante dal punto di vista SEO.<\/p>\n\n<p>Ci\u00f2 significa che il front-end deve gestire:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>la generazione dinamica degli URL dei prodotti,<\/li>\n\n\n\n<li>la struttura del category tree,<\/li>\n\n\n\n<li>il filtraggio e la paginazione,<\/li>\n\n\n\n<li>gli URL canonici,<\/li>\n\n\n\n<li>i tag hreflang per il multilingua,<\/li>\n\n\n\n<li>i metadati SEO.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Gestione dello stato (cart, session, autenticazione)<\/h3>\n\n<p>Dato che il front-end non \u00e8 pi\u00f9 legato alla classica sessione PHP, \u00e8 necessario gestire manualmente, ovvero tramite JS:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>la customer authentication (JWT o customer token tramite GraphQL),<\/li>\n\n\n\n<li>il cart ID,<\/li>\n\n\n\n<li>la distinzione tra utenti guest e registered,<\/li>\n\n\n\n<li>la sincronizzazione del carrello,<\/li>\n\n\n\n<li>il ripristino della session.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Uilizzo di framework front-end \/ storefront preconfezionati<\/h2>\n\n<p>Sono disponibili anche framework front-end prefatti per l&#8217;e-commerce headless. Di seguito ne presento i due pi\u00f9 diffusi, che sono al passo con i tempi e con le tecnologie moderne.<\/p>\n\n<h3 class=\"wp-block-heading\">GraphCommerce<\/h3>\n\n<p>\ud83d\udd17 <a href=\"https:\/\/www.graphcommerce.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.graphcommerce.org\/<\/a><\/p>\n\n<p>GraphCommerce \u00e8 una delle migliori soluzioni out-of-the-box per Magento headless:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>basato su <strong>React + Next.js<\/strong>,<\/li>\n\n\n\n<li>routing e URL management gi\u00e0 integrati,<\/li>\n\n\n\n<li>alcuni layout grafici \/ template gi\u00e0 predisposti,<\/li>\n\n\n\n<li>logiche gi\u00e0 pronte per:\n<ul class=\"wp-block-list\">\n<li>product page,<\/li>\n\n\n\n<li>category page,<\/li>\n\n\n\n<li>cart,<\/li>\n\n\n\n<li>checkout,<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>integrazione con il CMS Hygraph,<\/li>\n\n\n\n<li>ottimo <strong>Core Web Vitals score<\/strong> (80+ su mobile gi\u00e0 di base).<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/www.elitek.si\/wp-content\/uploads\/2026\/02\/graphcommerce-1024x510.png\" alt=\"\" class=\"wp-image-2071\" srcset=\"https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/graphcommerce-1024x510.png 1024w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/graphcommerce-300x150.png 300w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/graphcommerce-768x383.png 768w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/graphcommerce.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">VueStorefront<\/h3>\n\n<p>\ud83d\udd17 <a href=\"https:\/\/github.com\/vuestorefront\/vue-storefront\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/vuestorefront\/vue-storefront<\/a><\/p>\n\n<p>Vue Storefront (oggi Alokai) supporta:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>stack VueJS e React<\/li>\n\n\n\n<li><strong>Alokai Theme<\/strong> gi\u00e0 pronto &#8211; template con tutti i componenti e-commerce<\/li>\n\n\n\n<li>integrazione con Magento 2.<\/li>\n<\/ul>\n\n<p>Svantaggi:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>VueJS sta perdendo popolarit\u00e0,<\/li>\n\n\n\n<li>dubbi sul supporto a lungo termine e sulla disponibilit\u00e0 di sviluppatori con stack VueJS.<\/li>\n<\/ul>\n\n<p>Resta comunque una buona scelta per i team che gi\u00e0 padroneggiano Vue.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/www.elitek.si\/wp-content\/uploads\/2026\/02\/vuestorefront-1024x597.png\" alt=\"\" class=\"wp-image-2075\" srcset=\"https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/vuestorefront-1024x597.png 1024w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/vuestorefront-300x175.png 300w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/vuestorefront-768x448.png 768w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/vuestorefront.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">Soluzione custom per il front-end<\/h2>\n\n<p>\u00c8 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\u00f9 diffusi sono React e Next.js.<\/p>\n\n<p>Il vantaggio di questo approccio \u00e8 la totale flessibilit\u00e0 in fase di sviluppo: il front-end pu\u00f2 essere realizzato secondo le proprie valutazioni e i propri requisiti.<\/p>\n\n<p>Lo svantaggio \u00e8 invece la necessit\u00e0 di un notevole lavoro di sviluppo per il routing, la struttura degli URL, la SEO, ecc., cos\u00ec come per tutta la logica e-commerce (cart, checkout, error handling).<\/p>\n\n<p>Tale approccio \u00e8 sensato soprattutto per progetti con budget pi\u00f9 elevati e tempistiche flessibili.<\/p>\n\n<h2 class=\"wp-block-heading\">CMS editors per l&#8217;approccio headless<\/h2>\n\n<p>L&#8217;approccio headless consente l&#8217;integrazione di editor CMS di terze parti pi\u00f9 avanzati. In questo modo non si \u00e8 limitati ai soli CMS integrati, come avviene nel classico approccio monolitico, ma si pu\u00f2 scegliere tra un&#8217;ampia gamma di piattaforme CMS dedicate che supportano l&#8217;integrazione tramite API.<\/p>\n\n<p>Questi editor CMS sono spesso pi\u00f9 avanzati e consentono una gestione dei contenuti pi\u00f9 semplice e una migliore preparazione di campagne di marketing, ovvero di landing page.<\/p>\n\n<p>Il vostro team di marketing ve ne sar\u00e0 molto grato.<\/p>\n\n<h3 class=\"wp-block-heading\">Hypergraph<\/h3>\n\n<p>\ud83d\udd17 <a href=\"https:\/\/hygraph.com\/\" data-type=\"link\" data-id=\"https:\/\/hygraph.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/hygraph.com\/<\/a><\/p>\n\n<p>Hygraph \u00e8 un CMS headless basato su GraphQL, che si integra molto bene con i moderni framework front-end tramite API.<\/p>\n\n<p>Consente di:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>creare categorie, pagine statiche e landing page,<\/li>\n\n\n\n<li>supportare il Routing \/ URL.<\/li>\n\n\n\n<li>gestire i contenuti in modo strutturato,<\/li>\n\n\n\n<li>utilizzare numerosi componenti e widget gi\u00e0 pronti (banner, sezioni hero, CTA \u2026),<\/li>\n\n\n\n<li>comporre le pagine tramite logica drag &amp; drop.<\/li>\n<\/ul>\n\n<p>Un&#8217;ottima base per l&#8217;integrazione con Magento \u00e8 GraphCommerce, che dispone gi\u00e0 di un&#8217;integrazione pronta con Hygraph.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/www.elitek.si\/wp-content\/uploads\/2026\/02\/hypergraph-1024x597.png\" alt=\"\" class=\"wp-image-2079\" srcset=\"https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/hypergraph-1024x597.png 1024w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/hypergraph-300x175.png 300w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/hypergraph-768x448.png 768w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/hypergraph.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">Prismic<\/h3>\n\n<p>\ud83d\udd17 <a href=\"https:\/\/prismic.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/prismic.io\/<\/a><\/p>\n\n<p>Anche Prismic \u00e8 un CMS headless molto popolare, che consente la connessione al front-end tramite API.<\/p>\n\n<p>I principali vantaggi di Prismic:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Slice-based content model<\/strong> \u2013 i contenuti vengono composti tramite \u201cslice\u201d modulari, il che consente una costruzione delle pagine estremamente flessibile.<\/li>\n\n\n\n<li>Ottimo supporto per <strong>Next.js<\/strong>, aspetto importante in soluzioni come GraphCommerce o storefront custom.<\/li>\n\n\n\n<li>Semplice integrazione con l&#8217;API GraphQL di Magento.<\/li>\n\n\n\n<li>Costruzione delle pagine secondo il principio drag &amp; drop<\/li>\n\n\n\n<li>Consente inoltre la realizzazione di product page e category page con supporto al routing.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/www.elitek.si\/wp-content\/uploads\/2026\/02\/prismic-1024x597.png\" alt=\"\" class=\"wp-image-2083\" srcset=\"https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/prismic-1024x597.png 1024w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/prismic-300x175.png 300w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/prismic-768x448.png 768w, https:\/\/dev-webpage.elitek.si\/wp-content\/uploads\/2026\/02\/prismic.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">Contentful<\/h3>\n\n<p>\ud83d\udd17 <a href=\"https:\/\/www.contentful.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.contentful.com\/<\/a><\/p>\n\n<p>Anche Contentful \u00e8 un editor CMS headless molto diffuso, sebbene forse leggermente pi\u00f9 orientato al segmento enterprise, ovvero a grandi organizzazioni \/ progetti.<\/p>\n\n<p>Vantaggi di Contentful:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>ottimo supporto per <strong>team di grandi dimensioni<\/strong>, gestione dei diritti di accesso e workflow,<\/li>\n\n\n\n<li>eccellente supporto API (GraphQL + REST),<\/li>\n\n\n\n<li>adatto a sistemi e-commerce <strong>grandi, multilingua e multi-brand<\/strong>.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1862\" height=\"941\" src=\"https:\/\/www.elitek.si\/wp-content\/uploads\/2026\/02\/contentful-animation.gif\" alt=\"\" class=\"wp-image-2088\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\">Come si comporta Magento nei progetti e-commerce headless?<\/h2>\n\n<p>Magento 2 dispone di un&#8217;ottima predisposizione e, in generale, di un buon ecosistema per l&#8217;approccio headless.<\/p>\n\n<p>Sono disponibili API REST e GraphQL praticamente per tutti i processi e-commerce: prodotti, categorie, filtri, carrello, session handling, ecc.<\/p>\n\n<p>Per l&#8217;implementazione headless \u00e8 consigliato l&#8217;utilizzo delle API GraphQL, dato che consentono di recuperare solo i dati desiderati e non l&#8217;intero oggetto, riducendo notevolmente la quantit\u00e0 di dati scambiati e aumentando la velocit\u00e0.<\/p>\n\n<p>Magento 2 dispone inoltre di un caching integrato per GraphQL, che migliora le prestazioni e riduce il carico sul server.<\/p>\n\n<p>Per Magento 2 sono inoltre disponibili framework storefront come GraphCommerce e VueStorefront, che velocizzano notevolmente l&#8217;esecuzione del progetto.<\/p>\n\n<h2 class=\"wp-block-heading\">Checkout<\/h2>\n\n<p>Una delle sfide chiave in un progetto e-commerce headless \u00e8 l&#8217;implementazione del checkout.<\/p>\n\n<p>Come approcciare l&#8217;implementazione del processo di checkout?<\/p>\n\n<p>Storefront come GraphCommerce o Vue Storefront offrono gi\u00e0 il supporto per il checkout e per i payment provider pi\u00f9 diffusi, il che facilita notevolmente lo sviluppo.<\/p>\n\n<p>Nel caso in cui si desideri integrare payment provider meno diffusi o sloveni, come Bankart, Leanpay e simili, spesso non \u00e8 disponibile un supporto headless. In questi casi \u00e8 necessario sviluppare un&#8217;integrazione custom, ovvero un supporto dedicato per tali provider di pagamento.<\/p>\n\n<p>Vale la pena valutare anche la possibilit\u00e0 di un fallback al cart e al checkout predefiniti (default) messi a disposizione dalla piattaforma e-commerce.<\/p>\n\n<p>In questo caso l&#8217;utente viene reindirizzato al processo di cart + checkout default del ecommerce. In questo modo \u00e8 possibile utilizzare il meccanismo di checkout gi\u00e0 integrato della piattaforma e-commerce in uso e sfruttare i moduli di terze parti esistenti per i provider di shipping e di payment.<\/p>\n\n<p>Va per\u00f2 gestito adeguatamente il trasferimento della sessione utente (session) e dei prodotti, ovvero del carrello, verso il checkout e-commerce predefinito.<\/p>\n\n<h2 class=\"wp-block-heading\">Servizi esterni (3th party) per catalog, merchandising e related products<\/h2>\n\n<p>Nell&#8217;approccio headless \u00e8 opportuno valutare anche l&#8217;utilizzo, ovvero l&#8217;integrazione, di provider \u201ccloud\u201d per search e catalog.<\/p>\n\n<p>Si tratta di provider specializzati che offrono soluzioni dedicate per:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Motore di ricerca<\/li>\n\n\n\n<li>Catalog (pagina di categoria con filtraggio, ovvero facets).<\/li>\n\n\n\n<li>Merchandising<\/li>\n\n\n\n<li>Personalizzazione dell&#8217;esperienza utente<\/li>\n\n\n\n<li>Auto related<\/li>\n\n\n\n<li>Integrazione dell&#8217;AI per la correlazione dei prodotti<\/li>\n<\/ul>\n\n<p>Tali provider dispongono di algoritmi sensibilmente pi\u00f9 sofisticati per queste funzionalit\u00e0. In particolare emergono i benefici dell&#8217;utilizzo dell&#8217;intelligenza artificiale e della personalizzazione, che possono migliorare in modo significativo i tassi di conversione del negozio online.<\/p>\n\n<p>Vorrei evidenziare due provider \u2013 Nosto e Algolia \u2013 con i quali abbiamo gi\u00e0 collaborato in diversi progetti e che si sono dimostrati molto efficaci.<\/p>\n\n<p>Va per\u00f2 tenuto presente che si tratta di provider con un canone mensile fisso, il che pu\u00f2 incidere in misura non trascurabile sul budget del progetto.<\/p>\n\n<h3 class=\"wp-block-heading\">Algolia<\/h3>\n\n<p>\ud83d\udd17 <a href=\"https:\/\/www.algolia.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.algolia.com\/<\/a><\/p>\n\n<p>Algolia viene utilizzato molto di frequente come:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>search engine primario (con buon supporto per AI, sinonimi, correzione degli errori di battitura, ecc.),<\/li>\n\n\n\n<li>strumento per il category listing e il filtraggio (facets),<\/li>\n\n\n\n<li>soluzione per il merchandising,<\/li>\n\n\n\n<li>piattaforma per la personalizzazione,<\/li>\n\n\n\n<li>sistema di auto-related con supporto AI e approccio \u201cbig data\u201d.<\/li>\n<\/ul>\n\n<p>Vantaggi di Algolia nell&#8217;approccio headless:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>approccio completamente API-based (JavaScript) sul front-end,<\/li>\n\n\n\n<li>search estremamente veloce, anche con cataloghi di grandi dimensioni,<\/li>\n\n\n\n<li>ottimo supporto per React \/ Next.js,<\/li>\n\n\n\n<li>faceted search, autocomplete e typo-tolerance avanzati.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Nosto<\/h3>\n\n<p>\ud83d\udd17 <a href=\"https:\/\/www.nosto.com\/\">https:\/\/www.nosto.com\/<\/a><\/p>\n\n<p>Nosto \u00e8 una piattaforma molto simile ad Algolia e offre funzionalit\u00e0 comparabili.<\/p>\n\n<p>Supporta:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>search engine con supporto AI (sinonimi, correzione degli errori di battitura, auto-learn, ecc.),<\/li>\n\n\n\n<li>category listing e merchandising,<\/li>\n\n\n\n<li>personalizzazione dei contenuti,<\/li>\n\n\n\n<li>related products basati su AI,<\/li>\n\n\n\n<li>blocchi dinamici e slider,<\/li>\n\n\n\n<li>A\/B testing.<\/li>\n<\/ul>\n\n<p>In un contesto headless:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Nosto funziona come un servizio indipendente,<\/li>\n\n\n\n<li>il front-end recupera tramite API dati personalizzati,<\/li>\n\n\n\n<li>non vi \u00e8 una dipendenza diretta dalla piattaforma e-commerce.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Siete pronti per la nuova generazione dell&#8217;e-commerce?<\/h2>\n\n<p>L&#8217;e-commerce headless non \u00e8 semplicemente un aggiornamento tecnico, ma una scelta strategica. Vi consente di costruire un negozio online in modo modulare, scalabile e pronto per il futuro \u2013 senza i limiti dei sistemi monolitici. Ogni componente dell&#8217;architettura svolger\u00e0 il proprio compito.<\/p>\n\n<p>Questo approccio \u00e8 particolarmente adatto ad ambienti pi\u00f9 complessi, a modelli di vendita multicanale e ad aziende che desiderano una flessibilit\u00e0 tecnologica a lungo termine e la possibilit\u00e0 di adattarsi rapidamente al mercato.<\/p>\n\n<p>Se state pensando di passare a un&#8217;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\u00f9 adatte e nella realizzazione completa di una moderna soluzione e-commerce headless.<\/p>\n\n<div class=\"wp-block-cover\" style=\"min-height:150px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient\" style=\"background:linear-gradient(135deg,rgb(154,206,241) 0%,rgb(60,111,143) 100%)\"><\/span><div class=\"wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<p class=\"has-text-align-left\">Se state pensando di passare a un&#8217;architettura headless o avete bisogno di una consulenza specialistica per la progettazione e lo sviluppo di un progetto di questo tipo, <strong>siamo a vostra disposizione con piacere.<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-5590e8cb wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-medium-font-size has-custom-font-size wp-element-button\" href=\"https:\/\/www.elitek.si\/it\/contattateci\/\" style=\"border-radius:26px\">Contattaci<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>L&#8217;approccio e-commerce headless \u00e8 diventato sempre pi\u00f9 popolare negli ultimi anni, soprattutto nei sistemi e-commerce pi\u00f9 grandi e complessi. \u00c8 vero che richiede un po&#8217; pi\u00f9 di lavoro e di riflessione all&#8217;inizio del progetto, ma a lungo termine un&#8217;architettura di questo tipo pu\u00f2 rivelarsi molto vantaggiosa. Nell&#8217;approccio headless, l&#8217;interfaccia utente (front-end) \u00e8 completamente separata dal [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2066,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-2103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-categorizzato"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/posts\/2103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/comments?post=2103"}],"version-history":[{"count":3,"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/posts\/2103\/revisions"}],"predecessor-version":[{"id":2106,"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/posts\/2103\/revisions\/2106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/media\/2066"}],"wp:attachment":[{"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/media?parent=2103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/categories?post=2103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev-webpage.elitek.si\/it\/wp-json\/wp\/v2\/tags?post=2103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}