Shopify Dawn主题：如何显示所有产品变体价格？

实现步骤 #

1. 修改product-variant-options.liquid文件 #

该文件负责渲染每个变体选项（Swatch/Button/Dropdown），我们需要给每个选项添加价格显示元素，并标记必要属性供JS识别：

{% comment %}
  Renders product variant options for picker types (swatch, button, dropdown)
{% endcomment %}
{%- for value in option.values -%}
  {%- assign variant_match = product.variants | where: option.name, value -%}
  {%- assign initial_price = variant_match.first.price | money -%}
  
  {%- if picker_type == 'swatch' or picker_type == 'button' -%}
    <input
      type="radio"
      id="Option-{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
      name="options[{{ option.name | escape }}]"
      value="{{ value | escape }}"
      form="{{ product_form_id }}"
      data-option-name="{{ option.name | escape }}"
      {% if option.selected_value == value %}checked{% endif %}
    >
    <label
      for="Option-{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
      class="{% if picker_type == 'swatch' %}color-swatch{% else %}pill-button{% endif %}{% if option.selected_value == value %} selected{% endif %}"
      {% if picker_type == 'swatch' and value.swatch %}style="background: {{ value.swatch }};"{% endif %}
    >
      {{ value }}
      <span class="variant-price" data-option-value="{{ value | escape }}">{{ initial_price }}</span>
    </label>
  {%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
    <option
      value="{{ value | escape }}"
      {% if option.selected_value == value %}selected{% endif %}
      data-option-name="{{ option.name | escape }}"
      data-option-value="{{ value | escape }}"
    >
      {{ value }} - <span class="variant-price">{{ initial_price }}</span>
    </option>
  {%- endif -%}
{%- endfor -%}

2. 更新product-variant-picker.liquid文件 #

在现有变体数据脚本下方，添加存储所有变体信息的JSON脚本，供JS调用：

<!-- 原有代码保持不变 -->
<script type="application/json" data-selected-variant>
  {{ product.selected_or_first_available_variant | json }}
</script>
<!-- 新增：存储所有变体数据 -->
<script type="application/json" data-all-variants>
  {{ product.variants | json }}
</script>
</variant-selects>
{%- endunless -%}

3. 添加动态价格更新JS代码 #

将以下代码添加到theme.liquid的</body>标签前，或创建独立的JS资产文件（如variant-price-updater.js）并引入：

document.addEventListener('DOMContentLoaded', function() {
  const variantSelects = document.querySelector('variant-selects');
  const allVariants = JSON.parse(document.querySelector('[data-all-variants]').textContent);
  const optionInputs = document.querySelectorAll('input[name^="options["]');
  const selectElements = document.querySelectorAll('select[name^="options["]');

  // 获取当前选中的选项组合
  function getSelectedOptions() {
    const selected = {};
    optionInputs.forEach(input => {
      if (input.checked) {
        const optionName = input.getAttribute('data-option-name');
        selected[optionName] = input.value;
      }
    });
    selectElements.forEach(select => {
      const optionName = select.name.replace('options[', '').replace(']', '');
      selected[optionName] = select.value;
    });
    return selected;
  }

  // 根据选项组合匹配对应的变体
  function getVariantByOptions(selectedOptions) {
    return allVariants.find(variant => {
      return variant.options.every((optionValue, index) => {
        const optionName = variant.product.options[index];
        return selectedOptions[optionName] === optionValue;
      });
    });
  }

  // 更新所有选项的价格显示
  function updateAllVariantPrices() {
    const currentSelected = getSelectedOptions();
    document.querySelectorAll('[data-option-value]').forEach(element => {
      const optionName = element.getAttribute('data-option-name') || element.closest('input')?.getAttribute('data-option-name');
      const optionValue = element.getAttribute('data-option-value');
      const tempSelected = {...currentSelected};
      tempSelected[optionName] = optionValue;
      
      const variant = getVariantByOptions(tempSelected);
      if (variant) {
        const priceElement = element.querySelector('.variant-price') || element.closest('label')?.querySelector('.variant-price');
        if (priceElement) {
          priceElement.textContent = Shopify.formatMoney(variant.price, '{{ shop.money_format }}');
        }
      }
    });
  }

  // 监听选项变化事件
  optionInputs.forEach(input => input.addEventListener('change', updateAllVariantPrices));
  selectElements.forEach(select => select.addEventListener('change', updateAllVariantPrices));
  // 监听Dawn主题内置的变体变化事件
  variantSelects.addEventListener('variantChange', updateAllVariantPrices);

  // 页面加载时初始化价格显示
  updateAllVariantPrices();
});

4. 添加CSS样式优化显示 #

将以下样式添加到主题的CSS文件（如base.css或component-product.css）：

/* 变体价格基础样式 */
.variant-price {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: #6e6e6e;
}

/* 下拉菜单中的价格样式 */
select .variant-price {
  color: #555;
}

/* 选中状态下的价格样式 */
.label.selected .variant-price {
  color: #000;
  font-weight: 600;
}

功能说明 #

• 每个变体选项旁会显示该选项与当前已选其他选项组合后的对应价格
• 切换任何选项时，所有选项旁的价格会实时更新为对应组合的变体价格
• 兼容Dawn主题的Swatch/Button/Dropdown三种变体选择器类型

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