SDK 快速入门#

在向整个商品目录推广之前，先在一个店铺前台中添加一个商品可视化入口点，使用一个已准备好的商品。

1. 准备店铺和商品#

在 Dashboard 中选择您的店铺。获取其 Shop ID 和 Publishable Key。打开 Dashboard → Settings，将店铺前台来源添加到 Allowed Origins (CORS) 并点击 Save。确保至少有一个商品已准备好进行可视化。如果您从后端导入，请遵循 Product Import API 并查看最终任务结果。

2. 选择平台指南#

对于 Liquid 主题，使用 Shopify；对于 WooCommerce 店铺前台，使用 WooCommerce；对于您自己的网站，使用自定义店铺前台。更多平台指南列在 SDK 概述中。

3. 加载 SDK 一次#

对于自定义店铺前台，在宿主页面中加载此脚本一次。将两个占位符替换为来自同一店铺的值。

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="YOUR_SHOP_ID"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  async
></script>

4. 渲染匹配的渲染目标#

使用您准备好的商品目录中的精确 productCode。本示例请求 SDK 在商品验证后创建按钮。

html

<div data-idealhouse-button-container data-product-code="YOUR_PRODUCT_CODE"></div>

单独一个渲染目标不能证明商品具有可用性。确认所选变体、商品就绪状态和标识符映射。

5. 测试顾客流程#

检查 sdk.js 是否成功加载、出现正确的按钮，且点击后以目标商品打开 Viewer。切换变体，导航至另一个商品，并在移动设备上重复操作。在发布前完成上线检查清单。