如何为特定产品变体显示动态通知（URL无变化场景）

因为Liquid是服务端渲染代码，页面加载完成后不会再重新执行，所以仅靠Liquid无法处理无URL变化的变体切换场景，必须结合前端JavaScript实现：

1. 先在产品模板中添加通知元素，初始设置为隐藏：

<p id="preorder-notice" style="display:none;">Thats a Pre-order</p>

2. 监听变体切换事件，动态控制通知显示/隐藏：
   Shopify官方主题通常会在变体切换时触发variant:change事件，直接监听这个事件即可：

// 监听变体切换事件
document.addEventListener('variant:change', function(event) {
  const targetVariant = event.detail.variant;
  const noticeEl = document.getElementById('preorder-notice');
  
  if (targetVariant.title.includes('14')) {
    noticeEl.style.display = 'block';
  } else {
    noticeEl.style.display = 'none';
  }
});

// 页面加载完成后，检查初始显示的变体
document.addEventListener('DOMContentLoaded', function() {
  const initialVariant = window.variant;
  const noticeEl = document.getElementById('preorder-notice');
  
  if (initialVariant && initialVariant.title.includes('14')) {
    noticeEl.style.display = 'block';
  }
});

3. 若variant:change事件不生效（自定义主题可能存在此情况），可以直接监听变体选择器的change事件：

// 找到变体选择器（通常是name为id的下拉框）
const variantSelector = document.querySelector('select[name="id"]');
if (variantSelector) {
  variantSelector.addEventListener('change', function() {
    const selectedVariantId = this.value;
    // 从全局变体数组中找到对应变体
    const selectedVariant = window.variants.find(v => v.id == selectedVariantId);
    const noticeEl = document.getElementById('preorder-notice');
    
    if (selectedVariant.title.includes('14')) {
      noticeEl.style.display = 'block';
    } else {
      noticeEl.style.display = 'none';
    }
  });

  // 页面加载时初始化状态
  const initialVariant = window.variants.find(v => v.id == variantSelector.value);
  const noticeEl = document.getElementById('preorder-notice');
  if (initialVariant && initialVariant.title.includes('14')) {
    noticeEl.style.display = 'block';
  }
}

说明：

• 确保你的主题中存在全局的window.variant（初始变体）和window.variants（所有变体数组）对象，这是Shopify主题的标准变量
• 可以根据需求调整通知的样式，比如把style="display:none;"换成自定义的CSS类，更便于维护

内容的提问来源于stack exchange，提问作者Liquidishard