← Back to Portal

SFCC Headless Pro Architecture

Interactive sequence diagrams showing key commerce flows

Browser 🌐 PWA Kit ⚛️ CDN Cache 💾 SSR Server 🖥️ SCAPI 🔌 SFCC 🛒 Einstein AI 🤖 1 Request page 2 Check cache 3 Cache miss → Render 4 ShopperSearch 5 Query Catalog 6 Add Personalized Recs 7 Response 8 Cache response Render in browser 9 Client-side React Direct SCAPI calls
Browser 🌐 PWA Kit ⚛️ SLAS 🔐 SFCC 🛒 Customer DB 💾 GUEST FLOW 1 Request guest token 2 Issue token + refresh 3 Browse & add to cart LOGIN FLOW (PKCE) 4 Click Login 5 PKCE OAuth flow 6 Validate credentials 7 Issue registered token 8 Merge guest cart with registered cart TOKEN REFRESH (Auto) 9 Validate token Refresh on expiry
Browser 🌐 PWA Kit ⚛️ SCAPI 🔌 Payment GW 💳 Order Mgmt 📋 Email Service 📧 1 Review cart 2 ShopperBaskets 3 Enter shipping addr 4 Validate & calc ship 5 Select ship method Update basket 6 Enter payment 7 Tokenize (client) Token to SCAPI 8 Authorize payment 9 Create order Save order 10 Confirmation 11 Send confirmation email
Browser 🌐 PWA Kit ⚛️ Agent iFrame 🖼️ NULogic API 🤖 SLAS 🔐 SCAPI 🔌 1 Click "Ask Alex" 2 Open Drawer 3 Load iFrame 4 useAgentBridge hook postMessage channel 5 Sync: Token, Context 6 Ask question 7 Process via AI 8 Get token 9 Query products 10 postMessage: cart 11 Update cart state 12 Bidirectional sync: storefront ↔ agent
Developer 👨‍💻 Git 📦 GitHub Actions ⚙️ Build Server 🔨 Managed RT ☁️ CDN 🚀 1 Push feature branch 2 Trigger workflow 3 Lint → Test (Jest) 4 npm run build 5 Playwright E2E tests 6 Lighthouse CI (perf) 7 PR approved 8 Merge to main 9 Build production 10 pwa-kit-dev push 11 Staging live 12 Manual promote to production (or auto) 13 Invalidate CDN Live globally
Legend
Request / Action
Response / Return
Self-call / Internal operation