动态页面和变体更改#

SDK 会观察页面加载后插入的目标。您的店铺前台仍拥有所选商品，必须使目标属性与该选择保持同步。

一次性加载，更新目标#

在应用或主题层面保持一个 SDK 加载器。不要在每次路由切换时追加新脚本。在当前商品出现的位置渲染目标，并在快速预览、变体选择器或客户端路由更改商品时更新它。

对于生成的按钮，在目标容器上使用当前商品代码。对于已编写的按钮，也要重置之前的 SDK 状态，如自定义店铺前台教程所示。

已编写按钮重置#

以下内容遵循现有的自定义店铺前台契约。在您知道所选商品代码后，从您自己的选择处理器调用它。

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

连接实际的平台生命周期#

没有通用的电商变体更改事件。Shopify 指南定义了您主题要派发的事件；仅添加该监听器并不能连接主题。请使用您实际主题或应用程序记录的回调。

对于React / Next.js 和Vue / Nuxt，请遵循框架指南中的客户端生命周期和清理说明。

检查陈旧的选择#

在符合条件的商品、另一个符合条件的商品和无映射的商品之间切换。选择变更后，Viewer 绝不能重新打开之前的商品。使用快速预览和浏览器后退导航重复测试。