文档

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 关闭搜索。

选择您的语言。