使用正确的标识符
店面产品 ID、SKU 或款式 ID 不会自动成为 SPREEAI 服装 ID。维护通过您的摄取或 Shopify 同步工作流程创建的映射。该服装必须属于经过认证的合作伙伴并且可供试穿。
绘制产品选择图
TypeScript
import type { RenderTryOnButtonOptions } from "@spreeai/web-sdk";
export const productOptions: RenderTryOnButtonOptions = {
elementId: "spreeai-try-on",
garments: [{
garmentId: "SPREEAI_GARMENT_ID",
variant: { color: "blue", fit: "regular" },
availableSizes: ["S", "M", "L"],
price: "$59.00",
}],
showSizes: true,
showPrices: true,
};variant 可以过滤颜色、款式、性别和风格。记录的匹配不区分大小写。按颜色名称匹配颜色,例如 blue,而不是十六进制值。
成衣准备
| 状态或条件 | 整合行动 |
|---|---|
| 未同步/摄取不完整 | 保持正常的产品体验;不承诺试穿可用性。 |
| 就绪但在 Shopify 中禁用 | 检查并明确启用预期产品。仅仅准备好并不能使其成功。 |
| 可用的服装和配套款式 | 渲染该选择的按钮。 |
| 没有匹配的可用服装 | 预计会退回到阵列中的第一件衣服。 |
| 验证失败 | 没有呈现任何按钮;研究控制台和产品映射。 |
保持产品数据最新
- 当产品选择发生变化时,更新显示的价格和库存尺寸。
- 对单独的产品按钮使用唯一的容器 ID。
- 重新渲染按钮时,传递当前服装和变体选择。
- 在创建购物车突变之前,根据您自己的目录查看返回的购物车数据。
准备服装资产
使用当前 服装形象标准 用于支持的图像和元数据。在启用产品之前解决处理问题;不要用占位符服装 ID 代替生产数据。