开始之前
- 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. 检查结果
- 加载产品页面。有效、可用的服装会呈现一个试穿按钮。
- 打开试衣间,确认想要的服装和颜色。
- 关闭并重新打开它。检查手机和桌面上的体验。
- 在您的测试环境中尝试不可用的服装。确认您的正常产品和结账路径仍然可用。