文件

SDK 2.0 · 集成

購物車和活動

將兩個記錄的回調連接到您的店面和分析。

支援的回調

回調當它著火時關鍵負載
onTryOnButtonClick單擊按鈕時,對話方塊開啟之前。name
onAddToCartClicked當體驗發布加入購物車訊息時;首先啟用加入購物車。name, garments, setIsLoading, closePopUp, onError

處理購物車請求

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

const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
    enableAddToCart: true,
    events: {
      onTryOnButtonClick: ({ name }) => {
        // Forward this non-sensitive event to your analytics layer.
        console.info(name);
      },
      onAddToCartClicked: async ({
        garments, setIsLoading, closePopUp, onError,
      }) => {
        setIsLoading(true);
        try {
          // Implement this endpoint in YOUR storefront backend.
          // Validate and map these garment IDs to your own cart variants.
          const response = await fetch("/api/cart/from-spreeai", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ garments }),
          });
          if (!response.ok) throw new Error("Cart request failed");
          closePopUp();
        } catch {
          onError("Could not add to bag. Please try again.");
        } finally {
          setIsLoading(false);
        }
      },
    },
  });
}

衡量正確的行動

點選按鈕回呼可測量開啟試穿的意圖;它不能證明已完成試穿或發生購買。使用您批准的分析整合來獲取下游結果。不要發明已發布的 API 中不存在的完成回呼或伺服器 Webhook。

驗收檢查

  • 成功的購物車操作會添加預期的產品、型號和數量。
  • 失敗的請求會通知購物者並清除載入狀態。
  • 重複點擊不會在您自己的處理程序中建立意外的重複突變。
  • 分析僅包含事件元數據,不含客戶圖像、令牌或不必要的個人數據。
來源參考

搜尋頁面標題和內容。 Escape 關閉搜尋。

選擇您的語言。