Shopify如何根据选中商品变体动态调整数量下拉框最大可选值

完全可以实现该需求。注意Liquid是服务端渲染语言，页面加载完成后{% for i in (1..10) %}循环已经生成了固定的1-10选项，无法在前端回调中直接修改Liquid循环的上限，你可以在selectCallback回调中通过JS动态重写数量下拉框的选项来实现需求。

修改步骤 #

你只需要在现有selectCallback函数的变体可用逻辑块中，添加动态更新数量下拉框的代码即可，修改后的完整代码如下：

<script>
// <![CDATA[
var selectCallback = function(variant, selector) {
  const $quantitySelect = $('#quantity');
  if (variant) {
    if (variant.available) {
      // Selected a valid variant that is available.
      $('#add-to-cart-button').removeClass('disabled').removeAttr('disabled').html('Add to Cart');
      
      // ==========新增：动态更新数量下拉框开始==========
      // 获取当前变体库存
      const variantStock = variant.inventory_quantity;
      // 清空原有选项
      $quantitySelect.empty();
      // 可根据需求设置全局最大购买上限，比如最多买10件就改为 const maxPurchase = Math.min(variantStock, 10)
      const maxPurchase = variantStock;
      // 生成新选项
      for (let i = 1; i <= maxPurchase; i++) {
        $quantitySelect.append(`<option value="${i}">${i}</option>`);
      }
      // 启用数量选择框
      $quantitySelect.removeAttr('disabled').removeClass('disabled');
      // ==========新增：动态更新数量下拉框结束==========
      
    } else {
      // Variant is sold out.
      $('#add-to-cart-button').html('Sold Out').addClass('disabled').attr('disabled', 'disabled');
      // 变体售罄时禁用数量选择框
      $quantitySelect.attr('disabled', 'disabled').addClass('disabled');
    }
    // Whether the variant is in stock or not, we can update the price and compare at price.
    if ( variant.compare_at_price > variant.price ) {
      $('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</s>');
    } else {
      $('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );
    }

    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  } else {
    // variant doesn't exist.
    $('#add-to-cart-button').val('Unavailable').addClass('disabled').attr('disabled', 'disabled');
    // 变体不存在时禁用数量选择框
    $quantitySelect.attr('disabled', 'disabled').addClass('disabled');
  }
}
// initialize multi selector for product
jQuery(function($) {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }} , onVariantSelected: selectCallback });
});
// ]]>
</script>

注意事项 #

• 如果你店铺开启了超卖权限，variant.inventory_quantity返回的库存值可能不准确，可根据需求手动设置最大购买上限
• 如果单变体库存超过50，建议将数量下拉框替换为数字输入框搭配数值校验，避免下拉选项过长影响页面体验

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