Shopify集合页实现选中变体售价与对比价动态显示求助

核心思路 #

集合页面没有产品页内置的变体逻辑，需要手动存储变体数据、监听选择事件、匹配对应变体并更新价格。

步骤1：修改Liquid模板，输出变体数据与结构 #

在集合页面的商品循环中，为每个商品卡片添加变体选择器、价格显示区域，并嵌入变体的JSON数据：

{% for product in collection.products %}
  <div class="product-card">
    <!-- 商品标题、图片等原有内容 -->
    
    <!-- 变体选择器（根据你的主题结构调整，这里用下拉框示例） -->
    <div class="variant-picker">
      {% for option in product.options %}
        <label>{{ option.name }}</label>
        <select class="variant-select" data-option-index="{{ forloop.index0 }}">
          {% for value in option.values %}
            <option value="{{ value }}">{{ value }}</option>
          {% endfor %}
        </select>
      {% endfor %}
    </div>

    <!-- 价格显示容器 -->
    <div class="price-wrap">
      <span class="compare-price" style="text-decoration: line-through; display: {% if product.compare_at_price > product.price %}inline{% else %}none{% endif %};">
        {{ product.compare_at_price | money }}
      </span>
      <span class="current-price">{{ product.price | money }}</span>
    </div>

    <!-- 隐藏的变体数据存储 -->
    <script type="application/json" class="variant-data">
      {{ product.variants | json }}
    </script>
  </div>
{% endfor %}

步骤2：添加JavaScript逻辑处理变体切换 #

在页面底部（或主题的JS文件中）添加以下代码，监听选择器变化并更新价格：

document.addEventListener('DOMContentLoaded', function() {
  // 遍历每个商品卡片
  document.querySelectorAll('.product-card').forEach(card => {
    const selectors = card.querySelectorAll('.variant-select');
    const variants = JSON.parse(card.querySelector('.variant-data').textContent);
    const comparePriceEl = card.querySelector('.compare-price');
    const currentPriceEl = card.querySelector('.current-price');

    // 匹配选中选项对应的变体
    function getMatchedVariant() {
      const selectedValues = Array.from(selectors).map(sel => sel.value);
      return variants.find(variant => variant.options.join('|') === selectedValues.join('|'));
    }

    // 更新价格显示
    function updatePriceDisplay() {
      const variant = getMatchedVariant();
      if (!variant) return;

      // 格式化价格（用Shopify内置方法，或自定义方法）
      const currentPrice = Shopify.formatMoney(variant.price, Shopify.moneyFormat);
      const comparePrice = variant.compare_at_price > variant.price 
        ? Shopify.formatMoney(variant.compare_at_price, Shopify.moneyFormat)
        : null;

      currentPriceEl.textContent = currentPrice;
      if (comparePrice) {
        comparePriceEl.textContent = comparePrice;
        comparePriceEl.style.display = 'inline';
      } else {
        comparePriceEl.style.display = 'none';
      }
    }

    // 给每个选择器绑定变化事件
    selectors.forEach(sel => sel.addEventListener('change', updatePriceDisplay));
    // 初始化时执行一次，确保初始价格正确
    updatePriceDisplay();
  });
});

注意事项 #

• 类名要和你的主题模板对应：比如.product-card、.variant-select、.current-price这些，需要根据你实际的HTML结构调整。
• 如果你的主题没有加载Shopify.formatMoney，可以替换为自定义格式化函数：

  function formatMoney(cents, currencyFormat = '${{amount}}') {
    const amount = (cents / 100).toFixed(2);
    return currencyFormat.replace('{{amount}}', amount);
  }
  // 调用时替换为 formatMoney(variant.price, '$${{amount}}') 之类的格式
  

• 确保每个商品的变体数据是独立存储在卡片内部的，避免不同商品的变体数据混淆。

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