使用 Salesforce Commerce API 實現 Headless Commerce

Composable Storefront 是 Storefront Reference Architecture (SFRA) 的替代方案，它採用模組化方法，使用單獨的獨立元件來建置自訂的線上網店。透過前後端解耦架構，將網店和使用者體驗從資料和業務邏輯中分離出來。您能使用可自訂、可擴縮的解決方案來組合出自己獨特的品牌形象和體驗。

Composable Storefront 由兩個主要元件組成：

Progressive Web Application (PWA) Kit：一種開源框架，使用 JavaScript 和 React.js 框架建立網店。這可讓您控制網店給購物者的外觀和感覺。
Managed Runtime (MRT)：適用於無頭式數位網店的無伺服器、高可擴縮性、高可用性代管環境。Managed Runtime 提供基礎架構來部署、代管、管理您的 PWA 前端。

使用 Composable Storefront，您可以在 Salesforce Commerce API (SCAPI) 之上建置網店，並且可以建立包含其他供應商的解決方案來增強內建功能，例如新增第三方搜尋應用程式或內容管理系統 (CMS) 提供者。

下圖提供了 B2C Commerce 堆疊範例。包含 PWA Kit 和 MRT 的 Composable Storefront 顯示為使用 SCAPI 來與 B2C Commerce 執行個體通訊的兩個無頭式實作之一。也顯示了直接與 B2C Commerce 執行個體通訊的 SFRA 網店。B2C Commerce 元件包括 Script API 和具有 SCAPI Hook 及 SCAPI 自訂 API 的插件。

B2C Commerce 堆疊

Progressive Web Application (PWA) Kit

PWA Kit 框架包括協助建立完整網店的工具，以涵蓋整個購物者歷程。您可以在我們的示範網站上查看範例 PWA Kit 網店。

Managed Runtime 環境 (MRT)

您建立的 PWA Kit 應用程式在 MRT 之上運作。MRT 使用 SCAPI 與您網站上的功能進行互動，包括產品、目錄、購物車、促銷、庫存、運送和帳單。

內容傳遞網路 (CDN)

CDN 包含在 MRT 中，不需要額外的設定，它負責將要求定向到最近的應用程式伺服器，以確保快速有效地處理。

CDN 包括四個主要元件：

CDN 快取
邊緣函式，用於最佳化快取命中率。如果再次發出相同的要求，可以從快取中擷取回應，而不必再次產生回應。如此一來，可以提供更快的回應時間，改善整體購物者體驗。
與網店相關的資產，例如：靜態 Javascript、CSS、Sprite。
用於將要求轉送至 SCAPI、OCAPI 和其他外部 API 的 Proxy。

使用 CDN，您可以：

堆疊嵌入式 CDN (eCDN)，B2C Commerce 的預設 CDN，位於 MRT CDN 之上，可更好地控制網路應用程式防火牆 (WAF)/記錄檔/安全性/路由。
使用邊緣函式來自訂將要求路由到無伺服器基礎架構 (要求處理器) 的方式。

無伺服器基礎架構

PWA Kit 以無伺服器實作的形式代管在 MRT。無伺服器基礎架構具有高可擴縮性、高可用性、低維護成本、高效能：

MRT 可以擴大或縮小規模，以適應所有級別的網店流量，無論是節日大幅增加的購物流量，還是流量極少的測試環境皆適合。
您可以擁有許多 Managed Runtime 環境 (100 個立即可用)，無需額外費用，並且可以使用 UI 或 API 輕鬆啟動、停止執行個體。
您可以快速推出變更，並在變更歷史記錄中查看所有變更，這也方便您輕鬆復原。
所有 MRT 環境都分配了同等的資源，這表示您的 Production 和 Development 環境看起來是一樣的。

SCAPI

SCAPI 功能分為兩大類：Shopper API 和 Admin API。這兩類又進一步細分為不同的 API 家族，每個家族都專注於相關的功能。Shopper API 類組是專為客戶導向的功能而設計，例如產品瀏覽、購物車管理、結帳。Admin API 類組針對商家導向的功能，例如產品管理、訂單管理、庫存管理、客戶管理。

在建立 Composable Storefront 或其他無頭式網店時，您還可以使用 SCAPI Hook 來自訂行為並新增更多自訂端點。

下圖說明了購物者瀏覽器和 MRT 之間的通訊流程，以及 MRT 與 SCAPI、OCAPI、外部 API 的通訊。

Composable Storefront 如何與 SCAPI 配合運作

下一步驟

探索其他 Composable Storefront 和 SCAPI 指南：

Composable Storefront

SCAPI

OCAPI

開始使用 OCAPI

也請參閱

為什麼使用 SCAPI