Web SDK 集成

使用 @spreeai/web-sdk 適用於客製化或無頭網站店面。

這些例子針對已發布的 v3.0.0 包裹。致電 init() 一次並保護其可空結果。合作夥伴已解決。 clientId; 禁止通過 partnerId 至 v3 init()現有的 v2 整合在更改版本之前應遵循官方升級指南。

安裝

npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0

請包含已安裝 SDK 版本對應的 SDK 樣式表文件。

初始化並渲染

import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "your-garment-id" }],
    enableAddToCart: true,
  });
}

init() 返回 null 當身份驗證失敗時，保護所有渲染呼叫。

漿紗

v3.0.0 版本將尺寸調整功能整合到試穿體驗中，而不是單獨設定。 sdk.renderSizingButton() 方法。對於已獲批准尺寸資料的服裝，請在試穿按鈕上啟用流程：

await sdk?.renderTryOnButton({
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "your-garment-id" }],
  enableSizingRecommendation: true,
});

只有在服裝資料和合作夥伴配置準備就緒後，才能啟用尺寸功能。

活動

公共 SDK 文件中提供了「試穿」按鈕和「加入購物車」操作的用戶端回呼。請將回調連接到店舖現有的分析和購物車層。請勿在分析資料中放置客戶影像、憑證或不必要的個人資料。

生產指南

• 每頁初始化一次。
• 僅對符合條件的服裝進行渲染。
• 傳遞穩定的目錄標識符。
• 不要將客戶端密鑰寫入瀏覽器程式碼。
• 測試單頁應用程式中的變體變更和路由轉換。
• 保持鍵盤焦點，並為入口點提供易於存取的標籤。
• 驗證載入、失敗和不可用狀態。
• 監控啟用整合前後的產品頁面效能。

官方參考

• 介紹
• API
• Shopify 集成