[{"data":1,"prerenderedAt":1801},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fcommerce-componibile-architettura-mach-realta-produzione":11},{"i18nKey":4,"paths":5},"tech-005-2026-06",{"de":6,"es":7,"fr":8,"it":9,"ru":10},"\u002Fde\u002Ftech\u002Fcomposable-commerce-mach-produktion","\u002Fes\u002Ftech\u002Fcomposable-commerce-realidad-produccion","\u002Ffr\u002Ftech\u002Fcommercio-componibile-realta-mach-production","\u002Fit\u002Ftech\u002Fcomposable-commerce-architettura-mach-realta-produttiva","\u002Fru\u002Ftech\u002Fcomposable-commerce-realnost-production",{"_path":12,"_dir":13,"_draft":14,"_partial":14,"_locale":15,"title":16,"description":17,"publishedAt":18,"modifiedAt":18,"category":13,"i18nKey":4,"tags":19,"readingTime":25,"author":26,"body":27,"_type":1795,"_id":1796,"_source":1797,"_file":1798,"_stem":1799,"_extension":1800},"\u002Fit\u002Ftech\u002Fcommerce-componibile-architettura-mach-realta-produzione","tech",false,"","Commerce Componibile: Realtà Produttiva dell'Architettura MACH","BigCommerce, commercetools, Shopify Plus — analizziamo i trade-off del commerce componibile con benchmark in scenari production.","2026-06-25",[20,21,22,23,24],"commerce-componibile","architettura-mach","headless-commerce","shopify-hydrogen","commercetools",9,"Roibase",{"type":28,"children":29,"toc":1786},"root",[30,38,45,50,64,69,75,80,85,90,95,338,343,348,354,359,364,558,571,576,608,614,619,624,638,643,1122,1127,1132,1138,1143,1316,1321,1332,1342,1352,1358,1363,1393,1398,1403,1740,1745,1764,1769,1775,1780],{"type":31,"tag":32,"props":33,"children":34},"element","p",{},[35],{"type":36,"value":37},"text","Nel 2024 il \"commerce componibile\" è passato da termine PowerPoint a realtà operativa. Secondo Stack Overflow Developer Survey 2025, il 43% degli sviluppi e-commerce enterprise ha abbandonato le piattaforme monolitiche per l'architettura MACH (Microservices, API-first, Cloud-native, Headless). Eppure queste migrazioni si basano ancora su buzzword — \"headless è più moderno\" — non su trade-off misurabili. In questo articolo confrontiamo tre vendor principali in scenari reali: latenza di risposta API, ergonomia dello sviluppatore, costi runtime, latenza multi-region. Basate la vostra decisione sull'analisi delle prestazioni, non sulle demo commerciali.",{"type":31,"tag":39,"props":40,"children":42},"h2",{"id":41},"cosa-significa-davvero-unarchitettura-mach",[43],{"type":36,"value":44},"Cosa Significa Davvero un'Architettura MACH",{"type":31,"tag":32,"props":46,"children":47},{},[48],{"type":36,"value":49},"L'acronimo MACH è stato definito nel 2020 dalla MACH Alliance, ma l'uso quotidiano del termine rimane confuso. In pratica, MACH significa: la logica di commerce backend (prezzi, inventario, ordini) viene esposta via API, il frontend si distribuisce completamente separato (Vercel, Netlify, Cloudflare Pages). Questo disaccoppiamento consente di modificare il frontend per A\u002FB test senza coordinarsi con i rilasci backend.",{"type":31,"tag":32,"props":51,"children":52},{},[53,55,62],{"type":36,"value":54},"Tuttavia, questa frammentazione architetturale introduce complessità. Su Magento monolitico, ",{"type":31,"tag":56,"props":57,"children":59},"code",{"className":58},[],[60],{"type":36,"value":61},"$product->getPrice()",{"type":36,"value":63}," è una chiamata di funzione. Nel modello headless diventa una richiesta REST o GraphQL, aggiungendo latenza di rete. Esempio: Shopify Storefront API (GraphQL) restituisce in media 120ms (cache miss, chiamata dal Nord America all'istanza estesa in Europa). Secondo la documentazione di commercetools, la latenza P95 raggiunge 180ms (in deployment globale). Se inserite questi numeri nel rendering lato server (SSR), ogni page render porta con sé 120-180ms di overhead di rete.",{"type":31,"tag":32,"props":65,"children":66},{},[67],{"type":36,"value":68},"Il secondo trade-off è l'orchestrazione. In MACH, se Stripe pagamenti, Algolia ricerca, Contentful CMS e Klaviyo retention sono servizi separati, coordinarli nel flusso checkout è vostra responsabilità. Su Shopify Plus, Shopify Flow fornisce automazione built-in — quando arriva un ordine, inviare l'evento a Klaviyo non richiede codice. Su commercetools, scrivete voi l'orchestrazione (ad esempio AWS EventBridge + Lambda).",{"type":31,"tag":39,"props":70,"children":72},{"id":71},"bigcommerce-i-trade-off-dellapproccio-ibrido",[73],{"type":36,"value":74},"BigCommerce: I Trade-off dell'Approccio Ibrido",{"type":31,"tag":32,"props":76,"children":77},{},[78],{"type":36,"value":79},"BigCommerce offre una versione \"soft landing\" del composable. Supporta il consumo headless ma mantiene anche il motore template Stencil (basato su Handlebars) per lo sviluppo monolitico tradizionale. Questa flessibilità è sia vantaggiosa che una trappola.",{"type":31,"tag":32,"props":81,"children":82},{},[83],{"type":36,"value":84},"Vantaggio: inizialmente potete customizzare Stencil senza distribuire un frontend headless, poi migrare gradualmente. Potete mantenere il checkout in Stencil mentre spostate la homepage e il listing prodotti a Next.js. L'API GraphQL Storefront di BigCommerce accede a tutte le entity (prodotto, categoria, carrello, cliente). Una volta definito lo schema, il frontend non avrà sorprese.",{"type":31,"tag":32,"props":86,"children":87},{},[88],{"type":36,"value":89},"Trappola: questa flessibilità crea una pipeline di deployment complessa. Se mantenete sia il tema Stencil che il frontend Next.js, ogni modifica di feature richiede due deployment. Esempio: volete aggiungere un indicatore di soglia inventario — aggiornate il template Stencil e la route API Next.js. La CI\u002FCD deve costruire due artifact.",{"type":31,"tag":32,"props":91,"children":92},{},[93],{"type":36,"value":94},"Performance API: l'API GraphQL di BigCommerce ha latenza P50 di 95ms (US-East), P99 di 250ms (dati BigCommerce Status Page 2025). L'API REST è più veloce (P50 60ms) ma non altrettanto flessibile. Se volete il listing prodotto con anche i dati variante, REST causa il problema N+1 (una richiesta per ogni prodotto, una per ogni variante). Con GraphQL recuperate tutto in una query nested:",{"type":31,"tag":96,"props":97,"children":101},"pre",{"className":98,"code":99,"language":100,"meta":15,"style":15},"language-graphql shiki shiki-themes github-dark","query ProductsWithVariants {\n  site {\n    products(first: 20) {\n      edges {\n        node {\n          name\n          prices {\n            price {\n              value\n            }\n          }\n          variants {\n            edges {\n              node {\n                sku\n                inventory {\n                  isInStock\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","graphql",[102],{"type":31,"tag":56,"props":103,"children":104},{"__ignoreMap":15},[105,116,125,134,143,152,161,170,179,187,196,205,214,223,232,241,250,259,268,277,285,293,302,311,320,329],{"type":31,"tag":106,"props":107,"children":110},"span",{"class":108,"line":109},"line",1,[111],{"type":31,"tag":106,"props":112,"children":113},{},[114],{"type":36,"value":115},"query ProductsWithVariants {\n",{"type":31,"tag":106,"props":117,"children":119},{"class":108,"line":118},2,[120],{"type":31,"tag":106,"props":121,"children":122},{},[123],{"type":36,"value":124},"  site {\n",{"type":31,"tag":106,"props":126,"children":128},{"class":108,"line":127},3,[129],{"type":31,"tag":106,"props":130,"children":131},{},[132],{"type":36,"value":133},"    products(first: 20) {\n",{"type":31,"tag":106,"props":135,"children":137},{"class":108,"line":136},4,[138],{"type":31,"tag":106,"props":139,"children":140},{},[141],{"type":36,"value":142},"      edges {\n",{"type":31,"tag":106,"props":144,"children":146},{"class":108,"line":145},5,[147],{"type":31,"tag":106,"props":148,"children":149},{},[150],{"type":36,"value":151},"        node {\n",{"type":31,"tag":106,"props":153,"children":155},{"class":108,"line":154},6,[156],{"type":31,"tag":106,"props":157,"children":158},{},[159],{"type":36,"value":160},"          name\n",{"type":31,"tag":106,"props":162,"children":164},{"class":108,"line":163},7,[165],{"type":31,"tag":106,"props":166,"children":167},{},[168],{"type":36,"value":169},"          prices {\n",{"type":31,"tag":106,"props":171,"children":173},{"class":108,"line":172},8,[174],{"type":31,"tag":106,"props":175,"children":176},{},[177],{"type":36,"value":178},"            price {\n",{"type":31,"tag":106,"props":180,"children":181},{"class":108,"line":25},[182],{"type":31,"tag":106,"props":183,"children":184},{},[185],{"type":36,"value":186},"              value\n",{"type":31,"tag":106,"props":188,"children":190},{"class":108,"line":189},10,[191],{"type":31,"tag":106,"props":192,"children":193},{},[194],{"type":36,"value":195},"            }\n",{"type":31,"tag":106,"props":197,"children":199},{"class":108,"line":198},11,[200],{"type":31,"tag":106,"props":201,"children":202},{},[203],{"type":36,"value":204},"          }\n",{"type":31,"tag":106,"props":206,"children":208},{"class":108,"line":207},12,[209],{"type":31,"tag":106,"props":210,"children":211},{},[212],{"type":36,"value":213},"          variants {\n",{"type":31,"tag":106,"props":215,"children":217},{"class":108,"line":216},13,[218],{"type":31,"tag":106,"props":219,"children":220},{},[221],{"type":36,"value":222},"            edges {\n",{"type":31,"tag":106,"props":224,"children":226},{"class":108,"line":225},14,[227],{"type":31,"tag":106,"props":228,"children":229},{},[230],{"type":36,"value":231},"              node {\n",{"type":31,"tag":106,"props":233,"children":235},{"class":108,"line":234},15,[236],{"type":31,"tag":106,"props":237,"children":238},{},[239],{"type":36,"value":240},"                sku\n",{"type":31,"tag":106,"props":242,"children":244},{"class":108,"line":243},16,[245],{"type":31,"tag":106,"props":246,"children":247},{},[248],{"type":36,"value":249},"                inventory {\n",{"type":31,"tag":106,"props":251,"children":253},{"class":108,"line":252},17,[254],{"type":31,"tag":106,"props":255,"children":256},{},[257],{"type":36,"value":258},"                  isInStock\n",{"type":31,"tag":106,"props":260,"children":262},{"class":108,"line":261},18,[263],{"type":31,"tag":106,"props":264,"children":265},{},[266],{"type":36,"value":267},"                }\n",{"type":31,"tag":106,"props":269,"children":271},{"class":108,"line":270},19,[272],{"type":31,"tag":106,"props":273,"children":274},{},[275],{"type":36,"value":276},"              }\n",{"type":31,"tag":106,"props":278,"children":280},{"class":108,"line":279},20,[281],{"type":31,"tag":106,"props":282,"children":283},{},[284],{"type":36,"value":195},{"type":31,"tag":106,"props":286,"children":288},{"class":108,"line":287},21,[289],{"type":31,"tag":106,"props":290,"children":291},{},[292],{"type":36,"value":204},{"type":31,"tag":106,"props":294,"children":296},{"class":108,"line":295},22,[297],{"type":31,"tag":106,"props":298,"children":299},{},[300],{"type":36,"value":301},"        }\n",{"type":31,"tag":106,"props":303,"children":305},{"class":108,"line":304},23,[306],{"type":31,"tag":106,"props":307,"children":308},{},[309],{"type":36,"value":310},"      }\n",{"type":31,"tag":106,"props":312,"children":314},{"class":108,"line":313},24,[315],{"type":31,"tag":106,"props":316,"children":317},{},[318],{"type":36,"value":319},"    }\n",{"type":31,"tag":106,"props":321,"children":323},{"class":108,"line":322},25,[324],{"type":31,"tag":106,"props":325,"children":326},{},[327],{"type":36,"value":328},"  }\n",{"type":31,"tag":106,"props":330,"children":332},{"class":108,"line":331},26,[333],{"type":31,"tag":106,"props":334,"children":335},{},[336],{"type":36,"value":337},"}\n",{"type":31,"tag":32,"props":339,"children":340},{},[341],{"type":36,"value":342},"Questa query restituisce in 140ms (cache miss, single-region). Con REST avreste bisogno di 20 richieste di prodotto + 20 di varianti = 1,2s.",{"type":31,"tag":32,"props":344,"children":345},{},[346],{"type":36,"value":347},"Deployment multi-region: BigCommerce è SaaS, non scegliete l'istanza. Se il vostro negozio si trova in un datacenter US, il traffico asiatico subisce 220ms+ di latenza. La cache edge (Cloudflare) la maschera parzialmente, ma le mutazioni carrello (POST \u002Fcart\u002Fitems) non si cachiano, vanno sempre all'origin.",{"type":31,"tag":39,"props":349,"children":351},{"id":350},"commercetools-il-costo-operativo-del-composable-puro",[352],{"type":36,"value":353},"commercetools: Il Costo Operativo del Composable Puro",{"type":31,"tag":32,"props":355,"children":356},{},[357],{"type":36,"value":358},"commercetools rappresenta la forma \"pura\" di MACH — nessun frontend, nessun tema built-in. Solo API. Persino il Merchant Center (interfaccia admin) è una SPA che gira su REST API. Questo approccio massimizza la flessibilità ma aggiunge overhead operativo massimo.",{"type":31,"tag":32,"props":360,"children":361},{},[362],{"type":36,"value":363},"Design API: REST basato su HTTP\u002F2, resource-oriented. Ogni entity (prodotto, carrello, ordine, cliente) ha endpoint separato. Il supporto GraphQL è ancora in beta (al Q4 2025 non è production-ready). Esempio: aggiungere un item al carrello richiede:",{"type":31,"tag":96,"props":365,"children":369},{"className":366,"code":367,"language":368,"meta":15,"style":15},"language-bash shiki shiki-themes github-dark","POST https:\u002F\u002Fapi.europe-west1.gcp.commercetools.com\u002F{project-key}\u002Fcarts\u002F{cart-id}\nAuthorization: Bearer {token}\n\n{\n  \"version\": 3,\n  \"actions\": [\n    {\n      \"action\": \"addLineItem\",\n      \"productId\": \"abc123\",\n      \"variantId\": 1,\n      \"quantity\": 2\n    }\n  ]\n}\n","bash",[370],{"type":31,"tag":56,"props":371,"children":372},{"__ignoreMap":15},[373,388,406,415,424,443,460,468,485,502,519,536,543,551],{"type":31,"tag":106,"props":374,"children":375},{"class":108,"line":109},[376,382],{"type":31,"tag":106,"props":377,"children":379},{"style":378},"--shiki-default:#B392F0",[380],{"type":36,"value":381},"POST",{"type":31,"tag":106,"props":383,"children":385},{"style":384},"--shiki-default:#9ECBFF",[386],{"type":36,"value":387}," https:\u002F\u002Fapi.europe-west1.gcp.commercetools.com\u002F{project-key}\u002Fcarts\u002F{cart-id}\n",{"type":31,"tag":106,"props":389,"children":390},{"class":108,"line":118},[391,396,401],{"type":31,"tag":106,"props":392,"children":393},{"style":378},[394],{"type":36,"value":395},"Authorization:",{"type":31,"tag":106,"props":397,"children":398},{"style":384},[399],{"type":36,"value":400}," Bearer",{"type":31,"tag":106,"props":402,"children":403},{"style":384},[404],{"type":36,"value":405}," {token}\n",{"type":31,"tag":106,"props":407,"children":408},{"class":108,"line":127},[409],{"type":31,"tag":106,"props":410,"children":412},{"emptyLinePlaceholder":411},true,[413],{"type":36,"value":414},"\n",{"type":31,"tag":106,"props":416,"children":417},{"class":108,"line":136},[418],{"type":31,"tag":106,"props":419,"children":421},{"style":420},"--shiki-default:#E1E4E8",[422],{"type":36,"value":423},"{\n",{"type":31,"tag":106,"props":425,"children":426},{"class":108,"line":145},[427,432,438],{"type":31,"tag":106,"props":428,"children":429},{"style":378},[430],{"type":36,"value":431},"  \"version\"",{"type":31,"tag":106,"props":433,"children":435},{"style":434},"--shiki-default:#79B8FF",[436],{"type":36,"value":437},":",{"type":31,"tag":106,"props":439,"children":440},{"style":384},[441],{"type":36,"value":442}," 3,\n",{"type":31,"tag":106,"props":444,"children":445},{"class":108,"line":154},[446,451,455],{"type":31,"tag":106,"props":447,"children":448},{"style":378},[449],{"type":36,"value":450},"  \"actions\"",{"type":31,"tag":106,"props":452,"children":453},{"style":434},[454],{"type":36,"value":437},{"type":31,"tag":106,"props":456,"children":457},{"style":420},[458],{"type":36,"value":459}," [\n",{"type":31,"tag":106,"props":461,"children":462},{"class":108,"line":163},[463],{"type":31,"tag":106,"props":464,"children":465},{"style":420},[466],{"type":36,"value":467},"    {\n",{"type":31,"tag":106,"props":469,"children":470},{"class":108,"line":172},[471,476,480],{"type":31,"tag":106,"props":472,"children":473},{"style":378},[474],{"type":36,"value":475},"      \"action\"",{"type":31,"tag":106,"props":477,"children":478},{"style":434},[479],{"type":36,"value":437},{"type":31,"tag":106,"props":481,"children":482},{"style":384},[483],{"type":36,"value":484}," \"addLineItem\",\n",{"type":31,"tag":106,"props":486,"children":487},{"class":108,"line":25},[488,493,497],{"type":31,"tag":106,"props":489,"children":490},{"style":378},[491],{"type":36,"value":492},"      \"productId\"",{"type":31,"tag":106,"props":494,"children":495},{"style":434},[496],{"type":36,"value":437},{"type":31,"tag":106,"props":498,"children":499},{"style":384},[500],{"type":36,"value":501}," \"abc123\",\n",{"type":31,"tag":106,"props":503,"children":504},{"class":108,"line":189},[505,510,514],{"type":31,"tag":106,"props":506,"children":507},{"style":378},[508],{"type":36,"value":509},"      \"variantId\"",{"type":31,"tag":106,"props":511,"children":512},{"style":434},[513],{"type":36,"value":437},{"type":31,"tag":106,"props":515,"children":516},{"style":384},[517],{"type":36,"value":518}," 1,\n",{"type":31,"tag":106,"props":520,"children":521},{"class":108,"line":198},[522,527,531],{"type":31,"tag":106,"props":523,"children":524},{"style":378},[525],{"type":36,"value":526},"      \"quantity\"",{"type":31,"tag":106,"props":528,"children":529},{"style":434},[530],{"type":36,"value":437},{"type":31,"tag":106,"props":532,"children":533},{"style":434},[534],{"type":36,"value":535}," 2\n",{"type":31,"tag":106,"props":537,"children":538},{"class":108,"line":207},[539],{"type":31,"tag":106,"props":540,"children":541},{"style":420},[542],{"type":36,"value":319},{"type":31,"tag":106,"props":544,"children":545},{"class":108,"line":216},[546],{"type":31,"tag":106,"props":547,"children":548},{"style":420},[549],{"type":36,"value":550},"  ]\n",{"type":31,"tag":106,"props":552,"children":553},{"class":108,"line":225},[554],{"type":31,"tag":106,"props":555,"children":556},{"style":420},[557],{"type":36,"value":337},{"type":31,"tag":32,"props":559,"children":560},{},[561,563,569],{"type":36,"value":562},"La richiesta restituisce in P50 85ms, P95 180ms (da GCP europe-west1). Attenzione: il campo ",{"type":31,"tag":56,"props":564,"children":566},{"className":565},[],[567],{"type":36,"value":568},"version",{"type":36,"value":570}," è obbligatorio per l'optimistic locking. Ogni richiesta deve inviare la versione corrente del carrello, altrimenti ricevete 409 Conflict. Negli scenari di checkout concorrente, è necessaria una logica di retry.",{"type":31,"tag":32,"props":572,"children":573},{},[574],{"type":36,"value":575},"Costo operativo: commercetools applica pricing basato sulle chiamate API. Dopo i primi 50 milioni di API call\u002Fanno, inizia l'addebito ($0,0003\u002Fcall). Calcolo di esempio: un sito con 1 milione di sessioni mensili, una media di 15 API call per sessione (listing prodotto, dettagli, mutazioni carrello, checkout), risulta in 180 milioni di call annuali = 130 milioni di call a pagamento = $39.000 di costi API. Questo si aggiunge all'infrastruttura. Su BigCommerce questo costo è incorporato nel pricing SaaS.",{"type":31,"tag":32,"props":577,"children":578},{},[579,581,587,589,595,597,606],{"type":36,"value":580},"Multi-region: commercetools offre deployment multi-region su GCP e AWS. Scegliete ",{"type":31,"tag":56,"props":582,"children":584},{"className":583},[],[585],{"type":36,"value":586},"europe-west1",{"type":36,"value":588}," o ",{"type":31,"tag":56,"props":590,"children":592},{"className":591},[],[593],{"type":36,"value":594},"us-central1",{"type":36,"value":596}," per il vostro progetto. Non c'è replicazione cross-region — scegliete una sola regione. Per e-commerce globale, questo significa latenza. La soluzione: in un'architettura ",{"type":31,"tag":598,"props":599,"children":603},"a",{"href":600,"rel":601},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[602],"nofollow",[604],{"type":36,"value":605},"Headless Commerce",{"type":36,"value":607},", renderizzate il frontend edge (Cloudflare Workers, Vercel Edge Functions) e posizionate l'API di commercetools dietro un layer cache. Esempio: cachiate il catalogo prodotti su Cloudflare KV (TTL 60s), inviate sempre le mutazioni carrello all'origin. Il listing prodotto risponde in 40ms (da edge), l'operazione carrello impiega 180ms (verso origin).",{"type":31,"tag":39,"props":609,"children":611},{"id":610},"shopify-plus-strato-headless-su-base-monolitica",[612],{"type":36,"value":613},"Shopify Plus: Strato Headless su Base Monolitica",{"type":31,"tag":32,"props":615,"children":616},{},[617],{"type":36,"value":618},"Shopify Plus utilizza \"headless\" invece di \"componibile\", ma tecnicamente rimane una piattaforma monolitica con un layer headless. Con Hydrogen (framework React) e Storefront API potete costruire un frontend headless completo, ma checkout e admin rimangono sotto il controllo di Shopify. Questo modello ibrido accelera i piccoli team ma vincola i team più grandi.",{"type":31,"tag":32,"props":620,"children":621},{},[622],{"type":36,"value":623},"Storefront API: solo GraphQL, rate limit basato su costo (complessità della query). Ogni query GraphQL ha un \"costo\" (una semplice product query = 5 punti, nested variant + metafield = 15 punti). Per store Shopify Plus: quota di 1000 punti al secondo. Se una homepage che lista 50 prodotti consuma 250 punti, potete renderizzare la homepage 4 volte al secondo. Con traffic burst, raggiungete il rate limit (errore 429).",{"type":31,"tag":32,"props":625,"children":626},{},[627,629,636],{"type":36,"value":628},"Framework Hydrogen: è il framework React ufficiale di Shopify, costruito su Remix. La versione precedente (Hydrogen v1) era Vite-based, la nuova (Hydrogen v2) utilizza il routing file-based di Remix. Include client Shopify API built-in, cart management, routing i18n. Negli ",{"type":31,"tag":598,"props":630,"children":633},{"href":631,"rel":632},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fshopify",[602],[634],{"type":36,"value":635},"Shopify Partner Services",{"type":36,"value":637}," utilizziamo Hydrogen perché riduce il boilerplate: il client API, la gestione carrello, il redirect checkout, l'autenticazione API sono predisposti.",{"type":31,"tag":32,"props":639,"children":640},{},[641],{"type":36,"value":642},"Esempio di route Hydrogen:",{"type":31,"tag":96,"props":644,"children":648},{"className":645,"code":646,"language":647,"meta":15,"style":15},"language-typescript shiki shiki-themes github-dark","\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\nimport {useLoaderData} from '@remix-run\u002Freact';\nimport {json} from '@shopify\u002Fremix-oxygen';\n\nexport async function loader({params, context}) {\n  const {product} = await context.storefront.query(PRODUCT_QUERY, {\n    variables: {handle: params.handle},\n  });\n  return json({product});\n}\n\nexport default function Product() {\n  const {product} = useLoaderData\u003Ctypeof loader>();\n  return \u003Cdiv>{product.title}\u003C\u002Fdiv>;\n}\n\nconst PRODUCT_QUERY = `#graphql\n  query Product($handle: String!) {\n    product(handle: $handle) {\n      id\n      title\n      priceRange {\n        minVariantPrice {\n          amount\n        }\n      }\n    }\n  }\n`;\n","typescript",[649],{"type":31,"tag":56,"props":650,"children":651},{"__ignoreMap":15},[652,661,690,715,722,771,829,837,845,863,870,877,903,946,986,993,1000,1023,1031,1039,1047,1055,1063,1071,1079,1086,1093,1101,1109],{"type":31,"tag":106,"props":653,"children":654},{"class":108,"line":109},[655],{"type":31,"tag":106,"props":656,"children":658},{"style":657},"--shiki-default:#6A737D",[659],{"type":36,"value":660},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\n",{"type":31,"tag":106,"props":662,"children":663},{"class":108,"line":118},[664,670,675,680,685],{"type":31,"tag":106,"props":665,"children":667},{"style":666},"--shiki-default:#F97583",[668],{"type":36,"value":669},"import",{"type":31,"tag":106,"props":671,"children":672},{"style":420},[673],{"type":36,"value":674}," {useLoaderData} ",{"type":31,"tag":106,"props":676,"children":677},{"style":666},[678],{"type":36,"value":679},"from",{"type":31,"tag":106,"props":681,"children":682},{"style":384},[683],{"type":36,"value":684}," '@remix-run\u002Freact'",{"type":31,"tag":106,"props":686,"children":687},{"style":420},[688],{"type":36,"value":689},";\n",{"type":31,"tag":106,"props":691,"children":692},{"class":108,"line":127},[693,697,702,706,711],{"type":31,"tag":106,"props":694,"children":695},{"style":666},[696],{"type":36,"value":669},{"type":31,"tag":106,"props":698,"children":699},{"style":420},[700],{"type":36,"value":701}," {json} ",{"type":31,"tag":106,"props":703,"children":704},{"style":666},[705],{"type":36,"value":679},{"type":31,"tag":106,"props":707,"children":708},{"style":384},[709],{"type":36,"value":710}," '@shopify\u002Fremix-oxygen'",{"type":31,"tag":106,"props":712,"children":713},{"style":420},[714],{"type":36,"value":689},{"type":31,"tag":106,"props":716,"children":717},{"class":108,"line":136},[718],{"type":31,"tag":106,"props":719,"children":720},{"emptyLinePlaceholder":411},[721],{"type":36,"value":414},{"type":31,"tag":106,"props":723,"children":724},{"class":108,"line":145},[725,730,735,740,745,750,756,761,766],{"type":31,"tag":106,"props":726,"children":727},{"style":666},[728],{"type":36,"value":729},"export",{"type":31,"tag":106,"props":731,"children":732},{"style":666},[733],{"type":36,"value":734}," async",{"type":31,"tag":106,"props":736,"children":737},{"style":666},[738],{"type":36,"value":739}," function",{"type":31,"tag":106,"props":741,"children":742},{"style":378},[743],{"type":36,"value":744}," loader",{"type":31,"tag":106,"props":746,"children":747},{"style":420},[748],{"type":36,"value":749},"({",{"type":31,"tag":106,"props":751,"children":753},{"style":752},"--shiki-default:#FFAB70",[754],{"type":36,"value":755},"params",{"type":31,"tag":106,"props":757,"children":758},{"style":420},[759],{"type":36,"value":760},", ",{"type":31,"tag":106,"props":762,"children":763},{"style":752},[764],{"type":36,"value":765},"context",{"type":31,"tag":106,"props":767,"children":768},{"style":420},[769],{"type":36,"value":770},"}) {\n",{"type":31,"tag":106,"props":772,"children":773},{"class":108,"line":154},[774,779,784,789,794,799,804,809,814,819,824],{"type":31,"tag":106,"props":775,"children":776},{"style":666},[777],{"type":36,"value":778},"  const",{"type":31,"tag":106,"props":780,"children":781},{"style":420},[782],{"type":36,"value":783}," {",{"type":31,"tag":106,"props":785,"children":786},{"style":434},[787],{"type":36,"value":788},"product",{"type":31,"tag":106,"props":790,"children":791},{"style":420},[792],{"type":36,"value":793},"} ",{"type":31,"tag":106,"props":795,"children":796},{"style":666},[797],{"type":36,"value":798},"=",{"type":31,"tag":106,"props":800,"children":801},{"style":666},[802],{"type":36,"value":803}," await",{"type":31,"tag":106,"props":805,"children":806},{"style":420},[807],{"type":36,"value":808}," context.storefront.",{"type":31,"tag":106,"props":810,"children":811},{"style":378},[812],{"type":36,"value":813},"query",{"type":31,"tag":106,"props":815,"children":816},{"style":420},[817],{"type":36,"value":818},"(",{"type":31,"tag":106,"props":820,"children":821},{"style":434},[822],{"type":36,"value":823},"PRODUCT_QUERY",{"type":31,"tag":106,"props":825,"children":826},{"style":420},[827],{"type":36,"value":828},", {\n",{"type":31,"tag":106,"props":830,"children":831},{"class":108,"line":163},[832],{"type":31,"tag":106,"props":833,"children":834},{"style":420},[835],{"type":36,"value":836},"    variables: {handle: params.handle},\n",{"type":31,"tag":106,"props":838,"children":839},{"class":108,"line":172},[840],{"type":31,"tag":106,"props":841,"children":842},{"style":420},[843],{"type":36,"value":844},"  });\n",{"type":31,"tag":106,"props":846,"children":847},{"class":108,"line":25},[848,853,858],{"type":31,"tag":106,"props":849,"children":850},{"style":666},[851],{"type":36,"value":852},"  return",{"type":31,"tag":106,"props":854,"children":855},{"style":378},[856],{"type":36,"value":857}," json",{"type":31,"tag":106,"props":859,"children":860},{"style":420},[861],{"type":36,"value":862},"({product});\n",{"type":31,"tag":106,"props":864,"children":865},{"class":108,"line":189},[866],{"type":31,"tag":106,"props":867,"children":868},{"style":420},[869],{"type":36,"value":337},{"type":31,"tag":106,"props":871,"children":872},{"class":108,"line":198},[873],{"type":31,"tag":106,"props":874,"children":875},{"emptyLinePlaceholder":411},[876],{"type":36,"value":414},{"type":31,"tag":106,"props":878,"children":879},{"class":108,"line":207},[880,884,889,893,898],{"type":31,"tag":106,"props":881,"children":882},{"style":666},[883],{"type":36,"value":729},{"type":31,"tag":106,"props":885,"children":886},{"style":666},[887],{"type":36,"value":888}," default",{"type":31,"tag":106,"props":890,"children":891},{"style":666},[892],{"type":36,"value":739},{"type":31,"tag":106,"props":894,"children":895},{"style":378},[896],{"type":36,"value":897}," Product",{"type":31,"tag":106,"props":899,"children":900},{"style":420},[901],{"type":36,"value":902},"() {\n",{"type":31,"tag":106,"props":904,"children":905},{"class":108,"line":216},[906,910,914,918,922,926,931,936,941],{"type":31,"tag":106,"props":907,"children":908},{"style":666},[909],{"type":36,"value":778},{"type":31,"tag":106,"props":911,"children":912},{"style":420},[913],{"type":36,"value":783},{"type":31,"tag":106,"props":915,"children":916},{"style":434},[917],{"type":36,"value":788},{"type":31,"tag":106,"props":919,"children":920},{"style":420},[921],{"type":36,"value":793},{"type":31,"tag":106,"props":923,"children":924},{"style":666},[925],{"type":36,"value":798},{"type":31,"tag":106,"props":927,"children":928},{"style":378},[929],{"type":36,"value":930}," useLoaderData",{"type":31,"tag":106,"props":932,"children":933},{"style":420},[934],{"type":36,"value":935},"\u003C",{"type":31,"tag":106,"props":937,"children":938},{"style":666},[939],{"type":36,"value":940},"typeof",{"type":31,"tag":106,"props":942,"children":943},{"style":420},[944],{"type":36,"value":945}," loader>();\n",{"type":31,"tag":106,"props":947,"children":948},{"class":108,"line":225},[949,953,958,963,968,973,977,982],{"type":31,"tag":106,"props":950,"children":951},{"style":666},[952],{"type":36,"value":852},{"type":31,"tag":106,"props":954,"children":955},{"style":420},[956],{"type":36,"value":957}," \u003C",{"type":31,"tag":106,"props":959,"children":960},{"style":378},[961],{"type":36,"value":962},"div",{"type":31,"tag":106,"props":964,"children":965},{"style":420},[966],{"type":36,"value":967},">{product.title}",{"type":31,"tag":106,"props":969,"children":970},{"style":666},[971],{"type":36,"value":972},"\u003C\u002F",{"type":31,"tag":106,"props":974,"children":975},{"style":420},[976],{"type":36,"value":962},{"type":31,"tag":106,"props":978,"children":979},{"style":666},[980],{"type":36,"value":981},">",{"type":31,"tag":106,"props":983,"children":984},{"style":420},[985],{"type":36,"value":689},{"type":31,"tag":106,"props":987,"children":988},{"class":108,"line":234},[989],{"type":31,"tag":106,"props":990,"children":991},{"style":420},[992],{"type":36,"value":337},{"type":31,"tag":106,"props":994,"children":995},{"class":108,"line":243},[996],{"type":31,"tag":106,"props":997,"children":998},{"emptyLinePlaceholder":411},[999],{"type":36,"value":414},{"type":31,"tag":106,"props":1001,"children":1002},{"class":108,"line":252},[1003,1008,1013,1018],{"type":31,"tag":106,"props":1004,"children":1005},{"style":666},[1006],{"type":36,"value":1007},"const",{"type":31,"tag":106,"props":1009,"children":1010},{"style":434},[1011],{"type":36,"value":1012}," PRODUCT_QUERY",{"type":31,"tag":106,"props":1014,"children":1015},{"style":666},[1016],{"type":36,"value":1017}," =",{"type":31,"tag":106,"props":1019,"children":1020},{"style":384},[1021],{"type":36,"value":1022}," `#graphql\n",{"type":31,"tag":106,"props":1024,"children":1025},{"class":108,"line":261},[1026],{"type":31,"tag":106,"props":1027,"children":1028},{"style":384},[1029],{"type":36,"value":1030},"  query Product($handle: String!) {\n",{"type":31,"tag":106,"props":1032,"children":1033},{"class":108,"line":270},[1034],{"type":31,"tag":106,"props":1035,"children":1036},{"style":384},[1037],{"type":36,"value":1038},"    product(handle: $handle) {\n",{"type":31,"tag":106,"props":1040,"children":1041},{"class":108,"line":279},[1042],{"type":31,"tag":106,"props":1043,"children":1044},{"style":384},[1045],{"type":36,"value":1046},"      id\n",{"type":31,"tag":106,"props":1048,"children":1049},{"class":108,"line":287},[1050],{"type":31,"tag":106,"props":1051,"children":1052},{"style":384},[1053],{"type":36,"value":1054},"      title\n",{"type":31,"tag":106,"props":1056,"children":1057},{"class":108,"line":295},[1058],{"type":31,"tag":106,"props":1059,"children":1060},{"style":384},[1061],{"type":36,"value":1062},"      priceRange {\n",{"type":31,"tag":106,"props":1064,"children":1065},{"class":108,"line":304},[1066],{"type":31,"tag":106,"props":1067,"children":1068},{"style":384},[1069],{"type":36,"value":1070},"        minVariantPrice {\n",{"type":31,"tag":106,"props":1072,"children":1073},{"class":108,"line":313},[1074],{"type":31,"tag":106,"props":1075,"children":1076},{"style":384},[1077],{"type":36,"value":1078},"          amount\n",{"type":31,"tag":106,"props":1080,"children":1081},{"class":108,"line":322},[1082],{"type":31,"tag":106,"props":1083,"children":1084},{"style":384},[1085],{"type":36,"value":301},{"type":31,"tag":106,"props":1087,"children":1088},{"class":108,"line":331},[1089],{"type":31,"tag":106,"props":1090,"children":1091},{"style":384},[1092],{"type":36,"value":310},{"type":31,"tag":106,"props":1094,"children":1096},{"class":108,"line":1095},27,[1097],{"type":31,"tag":106,"props":1098,"children":1099},{"style":384},[1100],{"type":36,"value":319},{"type":31,"tag":106,"props":1102,"children":1104},{"class":108,"line":1103},28,[1105],{"type":31,"tag":106,"props":1106,"children":1107},{"style":384},[1108],{"type":36,"value":328},{"type":31,"tag":106,"props":1110,"children":1112},{"class":108,"line":1111},29,[1113,1118],{"type":31,"tag":106,"props":1114,"children":1115},{"style":384},[1116],{"type":36,"value":1117},"`",{"type":31,"tag":106,"props":1119,"children":1120},{"style":420},[1121],{"type":36,"value":689},{"type":31,"tag":32,"props":1123,"children":1124},{},[1125],{"type":36,"value":1126},"Questa route, distribuita su Oxygen (la piattaforma edge di Shopify), ha latenza media globale di 90ms (Dashboard Performance Shopify 2025). Però Oxygen è disponibile solo per clienti Shopify Plus; con i piani standard potete distribuire su Vercel ma la quota Storefront API resta invariata.",{"type":31,"tag":32,"props":1128,"children":1129},{},[1130],{"type":36,"value":1131},"Trade-off: il checkout non è customizzabile. La pagina checkout di Shopify si renderizza sul server Shopify, separato dal vostro frontend headless. Se volete mostrare un sistema loyalty custom nel checkout, usate Shopify Scripts (basato su Liquid) o Checkout UI Extensions (componenti React con API limitata). Su commercetools costruite il checkout completamente.",{"type":31,"tag":39,"props":1133,"children":1135},{"id":1134},"matrice-decisionale-quale-vendor-per-quale-scenario",[1136],{"type":36,"value":1137},"Matrice Decisionale: Quale Vendor per Quale Scenario",{"type":31,"tag":32,"props":1139,"children":1140},{},[1141],{"type":36,"value":1142},"Confrontiamo i tre vendor su metriche concrete:",{"type":31,"tag":1144,"props":1145,"children":1146},"table",{},[1147,1175],{"type":31,"tag":1148,"props":1149,"children":1150},"thead",{},[1151],{"type":31,"tag":1152,"props":1153,"children":1154},"tr",{},[1155,1161,1166,1170],{"type":31,"tag":1156,"props":1157,"children":1158},"th",{},[1159],{"type":36,"value":1160},"Metrica",{"type":31,"tag":1156,"props":1162,"children":1163},{},[1164],{"type":36,"value":1165},"BigCommerce",{"type":31,"tag":1156,"props":1167,"children":1168},{},[1169],{"type":36,"value":24},{"type":31,"tag":1156,"props":1171,"children":1172},{},[1173],{"type":36,"value":1174},"Shopify Plus",{"type":31,"tag":1176,"props":1177,"children":1178},"tbody",{},[1179,1203,1226,1249,1271,1293],{"type":31,"tag":1152,"props":1180,"children":1181},{},[1182,1188,1193,1198],{"type":31,"tag":1183,"props":1184,"children":1185},"td",{},[1186],{"type":36,"value":1187},"Latenza API P50",{"type":31,"tag":1183,"props":1189,"children":1190},{},[1191],{"type":36,"value":1192},"95ms (GraphQL)",{"type":31,"tag":1183,"props":1194,"children":1195},{},[1196],{"type":36,"value":1197},"85ms (REST)",{"type":31,"tag":1183,"props":1199,"children":1200},{},[1201],{"type":36,"value":1202},"120ms (GraphQL)",{"type":31,"tag":1152,"props":1204,"children":1205},{},[1206,1211,1216,1221],{"type":31,"tag":1183,"props":1207,"children":1208},{},[1209],{"type":36,"value":1210},"Multi-region",{"type":31,"tag":1183,"props":1212,"children":1213},{},[1214],{"type":36,"value":1215},"Vendor-controlled (US\u002FEU)",{"type":31,"tag":1183,"props":1217,"children":1218},{},[1219],{"type":36,"value":1220},"GCP\u002FAWS regionale",{"type":31,"tag":1183,"props":1222,"children":1223},{},[1224],{"type":36,"value":1225},"Edge globale (Oxygen)",{"type":31,"tag":1152,"props":1227,"children":1228},{},[1229,1234,1239,1244],{"type":31,"tag":1183,"props":1230,"children":1231},{},[1232],{"type":36,"value":1233},"Onboarding developer",{"type":31,"tag":1183,"props":1235,"children":1236},{},[1237],{"type":36,"value":1238},"Medio (Stencil + Next.js)",{"type":31,"tag":1183,"props":1240,"children":1241},{},[1242],{"type":36,"value":1243},"Alto (API pura)",{"type":31,"tag":1183,"props":1245,"children":1246},{},[1247],{"type":36,"value":1248},"Basso (Hydrogen)",{"type":31,"tag":1152,"props":1250,"children":1251},{},[1252,1257,1262,1266],{"type":31,"tag":1183,"props":1253,"children":1254},{},[1255],{"type":36,"value":1256},"Controllo checkout",{"type":31,"tag":1183,"props":1258,"children":1259},{},[1260],{"type":36,"value":1261},"Completo",{"type":31,"tag":1183,"props":1263,"children":1264},{},[1265],{"type":36,"value":1261},{"type":31,"tag":1183,"props":1267,"children":1268},{},[1269],{"type":36,"value":1270},"Limitato (checkout Shopify)",{"type":31,"tag":1152,"props":1272,"children":1273},{},[1274,1279,1284,1289],{"type":31,"tag":1183,"props":1275,"children":1276},{},[1277],{"type":36,"value":1278},"Costo API mensile (1M sessioni)",{"type":31,"tag":1183,"props":1280,"children":1281},{},[1282],{"type":36,"value":1283},"Incluso in SaaS",{"type":31,"tag":1183,"props":1285,"children":1286},{},[1287],{"type":36,"value":1288},"~$3.250",{"type":31,"tag":1183,"props":1290,"children":1291},{},[1292],{"type":36,"value":1283},{"type":31,"tag":1152,"props":1294,"children":1295},{},[1296,1301,1306,1311],{"type":31,"tag":1183,"props":1297,"children":1298},{},[1299],{"type":36,"value":1300},"Feature built-in",{"type":31,"tag":1183,"props":1302,"children":1303},{},[1304],{"type":36,"value":1305},"Medio (POS, B2B)",{"type":31,"tag":1183,"props":1307,"children":1308},{},[1309],{"type":36,"value":1310},"Basso (solo API)",{"type":31,"tag":1183,"props":1312,"children":1313},{},[1314],{"type":36,"value":1315},"Alto (Flow, Script)",{"type":31,"tag":32,"props":1317,"children":1318},{},[1319],{"type":36,"value":1320},"Raccomandazioni per scenario:",{"type":31,"tag":32,"props":1322,"children":1323},{},[1324,1330],{"type":31,"tag":1325,"props":1326,"children":1327},"strong",{},[1328],{"type":36,"value":1329},"Scegliete BigCommerce se:",{"type":36,"value":1331}," avete complessità B2B (quote management, customer groups), non avete fretta per la migrazione headless ma volete mantenerla opzionale. Usate multi-storefront (diversi brand stesso backend).",{"type":31,"tag":32,"props":1333,"children":1334},{},[1335,1340],{"type":31,"tag":1325,"props":1336,"children":1337},{},[1338],{"type":36,"value":1339},"Scegliete commercetools se:",{"type":36,"value":1341}," volete ownership completo (checkout custom), avete un'infrastruttura API-first (app mobile + web + POS nutrite dallo stesso backend), il vostro traffico supera 100M sessioni\u002Fanno (dove l'ottimizzazione costi API diventa strategica).",{"type":31,"tag":32,"props":1343,"children":1344},{},[1345,1350],{"type":31,"tag":1325,"props":1346,"children":1347},{},[1348],{"type":36,"value":1349},"Scegliete Shopify Plus se:",{"type":36,"value":1351}," il team di sviluppo è piccolo (2-4 developer), il checkout non richiede customizzazioni, volete sfruttare l'App Store di Shopify (Klaviyo, Yotpo, Gorgias hanno connector built-in).",{"type":31,"tag":39,"props":1353,"children":1355},{"id":1354},"il-costo-nascosto-del-composable-orchestrazione",[1356],{"type":36,"value":1357},"Il Costo Nascosto del Composable: Orchestrazione",{"type":31,"tag":32,"props":1359,"children":1360},{},[1361],{"type":36,"value":1362},"La scelta del vendor maschera la difficoltà reale che emerge dopo il deployment: l'orchestrazione. In MACH il flusso checkout richiede una catena:",{"type":31,"tag":1364,"props":1365,"children":1366},"ol",{},[1367,1373,1378,1383,1388],{"type":31,"tag":1368,"props":1369,"children":1370},"li",{},[1371],{"type":36,"value":1372},"Frontend (Next.js) → Storefront API (prodotto\u002Fcarrello)",{"type":31,"tag":1368,"props":1374,"children":1375},{},[1376],{"type":36,"value":1377},"Payment gateway (Stripe\u002FAdyen) → Backend orchestrator",{"type":31,"tag":1368,"props":1379,"children":1380},{},[1381],{"type":36,"value":1382},"OMS (Order Management) → commercetools\u002FBigCommerce",{"type":31,"tag":1368,"props":1384,"children":1385},{},[1386],{"type":36,"value":1387},"Email (Klaviyo\u002FSendGrid) → Customer data",{"type":31,"tag":1368,"props":1389,"children":1390},{},[1391],{"type":36,"value":1392},"Inventory sync (ERP) → Stock update",{"type":31,"tag":32,"props":1394,"children":1395},{},[1396],{"type":36,"value":1397},"Se un link fallisce (ad esempio il webhook Stripe arriva con 5 secondi di ritardo), l'esperienza cliente si degrada. Su Magento monolitico questo flusso è risolto dentro il vendor. Su composable, scrivete voi il codice di orchestrazione.",{"type":31,"tag":32,"props":1399,"children":1400},{},[1401],{"type":36,"value":1402},"Esempio di orchestrazione (pseudo-codice):",{"type":31,"tag":96,"props":1404,"children":1408},{"className":1405,"code":1406,"language":1407,"meta":15,"style":15},"language-javascript shiki shiki-themes github-dark","async function handleCheckout(cartId, paymentToken) {\n  const cart = await commercetools.getCart(cartId);\n  const paymentResult = await stripe.capturePayment(paymentToken, cart.total);\n  \n  if (paymentResult.status === 'succeeded') {\n    const order = await commercetools.createOrder(cartId);\n    await klaviyo.trackEvent('Order Placed', { orderId: order.id });\n    await oms.syncOrder(order);\n    return { success: true, orderId: order.id };\n  } else {\n    \u002F\u002F Retry logic, error handling, idempotency\n    throw new CheckoutError('Payment failed');\n  }\n}\n","javascript",[1409],{"type":31,"tag":56,"props":1410,"children":1411},{"__ignoreMap":15},[1412,1452,1487,1522,1530,1557,1591,1623,1645,1668,1686,1694,1726,1733],{"type":31,"tag":106,"props":1413,"children":1414},{"class":108,"line":109},[1415,1420,1424,1429,1433,1438,1442,1447],{"type":31,"tag":106,"props":1416,"children":1417},{"style":666},[1418],{"type":36,"value":1419},"async",{"type":31,"tag":106,"props":1421,"children":1422},{"style":666},[1423],{"type":36,"value":739},{"type":31,"tag":106,"props":1425,"children":1426},{"style":378},[1427],{"type":36,"value":1428}," handleCheckout",{"type":31,"tag":106,"props":1430,"children":1431},{"style":420},[1432],{"type":36,"value":818},{"type":31,"tag":106,"props":1434,"children":1435},{"style":752},[1436],{"type":36,"value":1437},"cartId",{"type":31,"tag":106,"props":1439,"children":1440},{"style":420},[1441],{"type":36,"value":760},{"type":31,"tag":106,"props":1443,"children":1444},{"style":752},[1445],{"type":36,"value":1446},"paymentToken",{"type":31,"tag":106,"props":1448,"children":1449},{"style":420},[1450],{"type":36,"value":1451},") {\n",{"type":31,"tag":106,"props":1453,"children":1454},{"class":108,"line":118},[1455,1459,1464,1468,1472,1477,1482],{"type":31,"tag":106,"props":1456,"children":1457},{"style":666},[1458],{"type":36,"value":778},{"type":31,"tag":106,"props":1460,"children":1461},{"style":434},[1462],{"type":36,"value":1463}," cart",{"type":31,"tag":106,"props":1465,"children":1466},{"style":666},[1467],{"type":36,"value":1017},{"type":31,"tag":106,"props":1469,"children":1470},{"style":666},[1471],{"type":36,"value":803},{"type":31,"tag":106,"props":1473,"children":1474},{"style":420},[1475],{"type":36,"value":1476}," commercetools.",{"type":31,"tag":106,"props":1478,"children":1479},{"style":378},[1480],{"type":36,"value":1481},"getCart",{"type":31,"tag":106,"props":1483,"children":1484},{"style":420},[1485],{"type":36,"value":1486},"(cartId);\n",{"type":31,"tag":106,"props":1488,"children":1489},{"class":108,"line":127},[1490,1494,1499,1503,1507,1512,1517],{"type":31,"tag":106,"props":1491,"children":1492},{"style":666},[1493],{"type":36,"value":778},{"type":31,"tag":106,"props":1495,"children":1496},{"style":434},[1497],{"type":36,"value":1498}," paymentResult",{"type":31,"tag":106,"props":1500,"children":1501},{"style":666},[1502],{"type":36,"value":1017},{"type":31,"tag":106,"props":1504,"children":1505},{"style":666},[1506],{"type":36,"value":803},{"type":31,"tag":106,"props":1508,"children":1509},{"style":420},[1510],{"type":36,"value":1511}," stripe.",{"type":31,"tag":106,"props":1513,"children":1514},{"style":378},[1515],{"type":36,"value":1516},"capturePayment",{"type":31,"tag":106,"props":1518,"children":1519},{"style":420},[1520],{"type":36,"value":1521},"(paymentToken, cart.total);\n",{"type":31,"tag":106,"props":1523,"children":1524},{"class":108,"line":136},[1525],{"type":31,"tag":106,"props":1526,"children":1527},{"style":420},[1528],{"type":36,"value":1529},"  \n",{"type":31,"tag":106,"props":1531,"children":1532},{"class":108,"line":145},[1533,1538,1543,1548,1553],{"type":31,"tag":106,"props":1534,"children":1535},{"style":666},[1536],{"type":36,"value":1537},"  if",{"type":31,"tag":106,"props":1539,"children":1540},{"style":420},[1541],{"type":36,"value":1542}," (paymentResult.status ",{"type":31,"tag":106,"props":1544,"children":1545},{"style":666},[1546],{"type":36,"value":1547},"===",{"type":31,"tag":106,"props":1549,"children":1550},{"style":384},[1551],{"type":36,"value":1552}," 'succeeded'",{"type":31,"tag":106,"props":1554,"children":1555},{"style":420},[1556],{"type":36,"value":1451},{"type":31,"tag":106,"props":1558,"children":1559},{"class":108,"line":154},[1560,1565,1570,1574,1578,1582,1587],{"type":31,"tag":106,"props":1561,"children":1562},{"style":666},[1563],{"type":36,"value":1564},"    const",{"type":31,"tag":106,"props":1566,"children":1567},{"style":434},[1568],{"type":36,"value":1569}," order",{"type":31,"tag":106,"props":1571,"children":1572},{"style":666},[1573],{"type":36,"value":1017},{"type":31,"tag":106,"props":1575,"children":1576},{"style":666},[1577],{"type":36,"value":803},{"type":31,"tag":106,"props":1579,"children":1580},{"style":420},[1581],{"type":36,"value":1476},{"type":31,"tag":106,"props":1583,"children":1584},{"style":378},[1585],{"type":36,"value":1586},"createOrder",{"type":31,"tag":106,"props":1588,"children":1589},{"style":420},[1590],{"type":36,"value":1486},{"type":31,"tag":106,"props":1592,"children":1593},{"class":108,"line":163},[1594,1599,1604,1609,1613,1618],{"type":31,"tag":106,"props":1595,"children":1596},{"style":666},[1597],{"type":36,"value":1598},"    await",{"type":31,"tag":106,"props":1600,"children":1601},{"style":420},[1602],{"type":36,"value":1603}," klaviyo.",{"type":31,"tag":106,"props":1605,"children":1606},{"style":378},[1607],{"type":36,"value":1608},"trackEvent",{"type":31,"tag":106,"props":1610,"children":1611},{"style":420},[1612],{"type":36,"value":818},{"type":31,"tag":106,"props":1614,"children":1615},{"style":384},[1616],{"type":36,"value":1617},"'Order Placed'",{"type":31,"tag":106,"props":1619,"children":1620},{"style":420},[1621],{"type":36,"value":1622},", { orderId: order.id });\n",{"type":31,"tag":106,"props":1624,"children":1625},{"class":108,"line":172},[1626,1630,1635,1640],{"type":31,"tag":106,"props":1627,"children":1628},{"style":666},[1629],{"type":36,"value":1598},{"type":31,"tag":106,"props":1631,"children":1632},{"style":420},[1633],{"type":36,"value":1634}," oms.",{"type":31,"tag":106,"props":1636,"children":1637},{"style":378},[1638],{"type":36,"value":1639},"syncOrder",{"type":31,"tag":106,"props":1641,"children":1642},{"style":420},[1643],{"type":36,"value":1644},"(order);\n",{"type":31,"tag":106,"props":1646,"children":1647},{"class":108,"line":25},[1648,1653,1658,1663],{"type":31,"tag":106,"props":1649,"children":1650},{"style":666},[1651],{"type":36,"value":1652},"    return",{"type":31,"tag":106,"props":1654,"children":1655},{"style":420},[1656],{"type":36,"value":1657}," { success: ",{"type":31,"tag":106,"props":1659,"children":1660},{"style":434},[1661],{"type":36,"value":1662},"true",{"type":31,"tag":106,"props":1664,"children":1665},{"style":420},[1666],{"type":36,"value":1667},", orderId: order.id };\n",{"type":31,"tag":106,"props":1669,"children":1670},{"class":108,"line":189},[1671,1676,1681],{"type":31,"tag":106,"props":1672,"children":1673},{"style":420},[1674],{"type":36,"value":1675},"  } ",{"type":31,"tag":106,"props":1677,"children":1678},{"style":666},[1679],{"type":36,"value":1680},"else",{"type":31,"tag":106,"props":1682,"children":1683},{"style":420},[1684],{"type":36,"value":1685}," {\n",{"type":31,"tag":106,"props":1687,"children":1688},{"class":108,"line":198},[1689],{"type":31,"tag":106,"props":1690,"children":1691},{"style":657},[1692],{"type":36,"value":1693},"    \u002F\u002F Retry logic, error handling, idempotency\n",{"type":31,"tag":106,"props":1695,"children":1696},{"class":108,"line":207},[1697,1702,1707,1712,1716,1721],{"type":31,"tag":106,"props":1698,"children":1699},{"style":666},[1700],{"type":36,"value":1701},"    throw",{"type":31,"tag":106,"props":1703,"children":1704},{"style":666},[1705],{"type":36,"value":1706}," new",{"type":31,"tag":106,"props":1708,"children":1709},{"style":378},[1710],{"type":36,"value":1711}," CheckoutError",{"type":31,"tag":106,"props":1713,"children":1714},{"style":420},[1715],{"type":36,"value":818},{"type":31,"tag":106,"props":1717,"children":1718},{"style":384},[1719],{"type":36,"value":1720},"'Payment failed'",{"type":31,"tag":106,"props":1722,"children":1723},{"style":420},[1724],{"type":36,"value":1725},");\n",{"type":31,"tag":106,"props":1727,"children":1728},{"class":108,"line":216},[1729],{"type":31,"tag":106,"props":1730,"children":1731},{"style":420},[1732],{"type":36,"value":328},{"type":31,"tag":106,"props":1734,"children":1735},{"class":108,"line":225},[1736],{"type":31,"tag":106,"props":1737,"children":1738},{"style":420},[1739],{"type":36,"value":337},{"type":31,"tag":32,"props":1741,"children":1742},{},[1743],{"type":36,"value":1744},"Il codice sembra semplice, ma in produzione dovete gestire questi edge case:",{"type":31,"tag":1746,"props":1747,"children":1748},"ul",{},[1749,1754,1759],{"type":31,"tag":1368,"props":1750,"children":1751},{},[1752],{"type":36,"value":1753},"Stripe riuscito ma creazione ordine commercetools fallisce → pagamento incassato ma ordine inesistente (refund necessario)",{"type":31,"tag":1368,"props":1755,"children":1756},{},[1757],{"type":36,"value":1758},"Evento Klaviyo non inviato → cliente non riceve email (coda di retry necessaria)",{"type":31,"tag":1368,"props":1760,"children":1761},{},[1762],{"type":36,"value":1763},"Timeout di rete → è una richiesta duplicata?, come controllate l'idempotency",{"type":31,"tag":32,"props":1765,"children":1766},{},[1767],{"type":36,"value":1768},"Scrivere, testare e monitorare questa orchestrazione consuma bandwidth del team. Su Shopify Plus risolverete il flusso con Shopify Flow (no-code). Su commercetools dovete scrivere AWS Step Functions o workflow Temporal.",{"type":31,"tag":39,"props":1770,"children":1772},{"id":1771},"performance-frontend-il-trade-off-tbtlcp-del-headless",[1773],{"type":36,"value":1774},"Performance Frontend: Il Trade-off TBT\u002FLCP del Headless",{"type":31,"tag":32,"props":1776,"children":1777},{},[1778],{"type":36,"value":1779},"L'assunto che il commerce headless",{"type":31,"tag":1781,"props":1782,"children":1783},"style",{},[1784],{"type":36,"value":1785},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":15,"searchDepth":127,"depth":127,"links":1787},[1788,1789,1790,1791,1792,1793,1794],{"id":41,"depth":118,"text":44},{"id":71,"depth":118,"text":74},{"id":350,"depth":118,"text":353},{"id":610,"depth":118,"text":613},{"id":1134,"depth":118,"text":1137},{"id":1354,"depth":118,"text":1357},{"id":1771,"depth":118,"text":1774},"markdown","content:it:tech:commerce-componibile-architettura-mach-realta-produzione.md","content","it\u002Ftech\u002Fcommerce-componibile-architettura-mach-realta-produzione.md","it\u002Ftech\u002Fcommerce-componibile-architettura-mach-realta-produzione","md",1785967494397]