Shopify集成Santander组件时data-amount绑定价格变量失效问题

• Liquid渲染逻辑和前端组件初始化逻辑不同步：{{ current_variant.price }}是Shopify服务端Liquid语法，只会在页面首次加载时渲染出默认选中变体的价格，无法响应前端切换变体的JS动作；且Santander组件默认仅在脚本初次加载时扫描一次DOM上的data-amount属性，后续属性变更不会自动触发组件重渲染。
• 属性值格式不匹配：Shopify输出的current_variant.price默认是货币最小单位的整数（比如99.99美元对应输出9999），如果Santander组件要求传入主货币单位的带小数值，格式不匹配会直接导致组件加载失败。
• 属性写法不规范：如果写属性时没给Liquid输出值加双引号、或者值带千分位分隔符/特殊字符，会导致DOM解析data-amount失败，组件拿不到有效数值。

1. 修正首次加载时的属性配置 #

根据Santander组件要求的数值格式，用Liquid过滤器输出合规的属性值，一定要给属性值包裹双引号：

<!-- Santander分期组件示例，按组件要求选对应格式 -->
<div 
  class="santander-finance-widget"
  <!-- 若组件要求主货币单位（带2位小数，如99.99）用下面这行 -->
  data-amount="{{ current_variant.price | divided_by: 100.0 | round: 2 }}"
  <!-- 若组件要求最小货币单位（整数，如9999）用下面这行 -->
  <!-- data-amount="{{ current_variant.price }}" -->
  data-currency="{{ shop.currency }}"
></div>

注意：输出前要过滤掉价格里的货币符号、千分位分隔符，保证传入的是纯数字值。

2. 实现变体切换时的组件动态更新 #

绑定Shopify主题的变体切换事件，切换变体时手动更新组件属性并触发组件重渲染：

// 兼容Shopify Online Store 2.0 所有官方主题
document.addEventListener('variant:change', function(e) {
  const activeVariant = e.detail.variant;
  if (!activeVariant) return;

  const widget = document.querySelector('.santander-finance-widget');
  if (!widget) return;

  // 按组件要求格式化价格，示例为主单位带2位小数
  const formatAmount = (activeVariant.price / 100).toFixed(2);
  widget.setAttribute('data-amount', formatAmount);

  // 触发组件重渲染，方法名参考你拿到的Santander官方开发文档替换
  if (window.SantanderFinance && typeof window.SantanderFinance.refresh === 'function') {
    window.SantanderFinance.refresh(widget);
  }
});

如果是旧版非2.0主题，把事件绑定到变体选择器的change回调里即可，逻辑和上面一致。

3. 修正脚本加载顺序 #

把Santander的官方组件脚本引入放在页面底部</body>标签前，不要给脚本标签加无回调的async属性，避免脚本加载完成时DOM上的组件节点还未渲染，导致初始化时读不到data-amount值。如果必须异步加载脚本，要在脚本onload回调里再执行组件初始化逻辑。

内容的提问来源于stack exchange，提问作者Alexander Krüger