Shopify产品页数量选择器优化：限制步长为2且最低值为2

问题根源 #

你的代码存在两个核心问题：

1. 增减按钮的步长设置为±1，不符合你要求的每次增减2的需求
2. 减号按钮的点击逻辑没有严格遵循步长规则，导致可能出现奇数数量，进而触发后续异常

修复后的完整代码 #

{% if product.tags contains 'Liquidation' and product.type contains 'Chaise' %}
                 
<div class="ProductForm__QuantitySelector" {{ block.shopify_attributes }}>
  {% if block.settings.show_label %}
    <span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span>
  {% endif %}

  <div class="QuantitySelector QuantitySelector--large">
  <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity" disabled>{% render 'icon' with 'minus' %}</button>
  <input type="text" id="quantity-input" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="2" aria-label="{{ 'product.form.quantity' | t }}">
  <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</button>
</div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const decreaseButton = document.querySelector('[data-action="decrease-quantity"]');
  const increaseButton = document.querySelector('[data-action="increase-quantity"]');
  const quantityInput = document.getElementById('quantity-input');

  const updateDecreaseButtonState = () => {
    decreaseButton.disabled = parseInt(quantityInput.value) === 2;
  };

  // 初始更新减号按钮状态
  updateDecreaseButtonState();

  decreaseButton.addEventListener('click', function() {
    let quantity = parseInt(quantityInput.value);
    // 仅当数量大于2时，按步长2减少
    if (quantity > 2) {
      quantity -= 2;
      quantityInput.value = quantity;
    }
    updateDecreaseButtonState();
  });

  increaseButton.addEventListener('click', function() {
    let quantity = parseInt(quantityInput.value);
    // 按步长2增加
    quantity += 2;
    quantityInput.value = quantity;
    updateDecreaseButtonState();
  });

  quantityInput.addEventListener('change', function() {
    let quantity = parseInt(this.value);
    if (isNaN(quantity) || quantity < 2) {
      // 低于2或非数字时重置为2
      this.value = 2;
    } else if (quantity % 2 !== 0) {
      // 奇数时调整为最近的不小于2的偶数（比如3→2，5→4）
      this.value = quantity - 1;
    }
    updateDecreaseButtonState();
  });
});
</script>

{% else %}

<div class="ProductForm__QuantitySelector" {{ block.shopify_attributes }}>
  {% if block.settings.show_label %}
    <span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span>
  {% endif %}
  
<div class="QuantitySelector QuantitySelector--large">
    {% assign quantity_minus_one = line_item.quantity | minus: 1 %}
    <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity">{% render 'icon' with 'minus' %}</button>
    <input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1" aria-label="{{ 'product.form.quantity' | t }}">
    <button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</button>
  </div>
</div>
{% endif %}

关键修改说明 #

• 步长修正：将增减按钮的quantity +=1和quantity -=1分别改为quantity +=2和quantity -=2，严格遵循每次增减2的需求
• 减号逻辑优化：移除冗余的else分支，仅当数量大于2时执行减少操作，避免无效计算
• 输入框校验调整：当输入奇数时，将其修正为比当前值小1的偶数，确保数量始终为2、4、6...这类符合步长规则的数值，同时保证不低于最小数量2
• 按钮状态控制：保留updateDecreaseButtonState函数，确保当数量等于2时，减号按钮自动禁用，无法点击

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