開始之前
- A
clientId由 SPREEAI 為您批准的環境頒發。 - 已完成攝取的服裝屬於您的帳戶並可供試穿。
- 您可以編輯的產品頁面和具有唯一 HTML ID 的容器。
1. 安裝
終端
npm install @spreeai/web-sdk@3.0.0樣式表是包的一部分,必須包含在您的包中。
2.添加容器
HTML
<div id="spreeai-try-on"></div>3. 初始化和渲染
TypeScript
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";
// Add <div id="spreeai-try-on"></div> to your product page.
const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
await sdk.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
});
} else {
// Keep the normal product and purchase journey available.
console.warn("SPREEAI could not initialize.");
}init() 可以返回 null。在渲染之前檢查結果,並在每個頁面而不是每個按鈕初始化一次。
4. 检查结果
- 載入產品頁面。有效、可用的服裝會呈現試穿按鈕。
- 打開試衣間,確認想要的服裝和顏色。
- 關閉並重新打開它。檢查手機和桌面上的體驗。
- 在您的測試環境中嘗試不可用的服裝。確認您的正常產品和結帳路徑仍然可用。