始める前に
- 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。レンダリング前に結果を確認し、ボタンごとではなくページごとに 1 回初期化します。
4. 結果を確認する
- 商品ページを読み込みます。有効で利用可能な衣類には、試着ボタンが表示されます。
- 試着室を開けて、目的の服と色を確認します。
- 閉じて再度開きます。電話とデスクトップでのエクスペリエンスを確認してください。
- テスト環境で入手できない衣服を試してください。通常の商品とチェックアウト パスが引き続き使用可能であることを確認します。