网页SDK集成

使用 @spreeai/web-sdk 适用于自定义或无头网络店面。

这些示例针对已发布的 v3.0.0 包。致电 init() 一次并保护其可为空的结果。合作伙伴解决自 clientId;不通过 partnerId 到 v3 init()。现有的 v2 集成在更改版本之前应遵循官方升级指南。

安装

npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0

包括为已安装的 SDK 版本记录的 SDK 样式表。

初始化和渲染

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

// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "your-garment-id" }],
    enableAddToCart: true,
  });
}

init() 回报 null 当身份验证失败时。保护所有渲染调用。

浆纱

v3.0.0 在试穿体验中公开尺寸，而不是单独的 sdk.renderSizingButton() 方法。对于具有已批准尺码数据的服装，请在试穿按钮上启用该流程：

await sdk?.renderTryOnButton({
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "your-garment-id" }],
  enableSizingRecommendation: true,
});

仅在服装数据和合作伙伴配置准备就绪后才启用尺码调整。

活动

公共 SDK 记录了“试用”按钮和“添加到购物车”操作的客户端回调。将回调连接到店面的现有分析和购物车层。请勿将客户图像、凭证或不必要的个人数据放入分析负载中。

生产指导

每页初始化一次。
仅渲染符合条件的服装。
传递稳定的目录标识符。
让客户端机密远离浏览器代码。
测试单页应用程序中的变体更改和路由转换。
保留键盘焦点和入口点的可访问标签。
验证加载、失败和不可用状态。
在启用集成之前和之后监控产品页面性能。

官方参考