根据产品选项限制数量下拉列表

Question

我已将product_options.js 加载到我的商店中，我希望在用户选择变体时更改数量下拉列表的最大值。我有一个数量下拉菜单，虽然它不会根据库存水平而改变。

这是运行变体选择器的代码：

  <script>
    // <![CDATA[
    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add-to-cart-button').removeClass('disabled').removeAttr('disabled').html('Add to Cart');
        } else {
          // Variant is sold out.
          $('#add-to-cart-button').html('Sold Out').addClass('disabled').attr('disabled', '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');
      }
    }
    // initialize multi selector for product
    jQuery(function($) {
      new Shopify.OptionSelectors("product-select", { product: {{ product | json }} , onVariantSelected: selectCallback });
    });
    // ]]>
  </script>

产品页面上的液体。

    <select id="product-select" name="id">
            {% for variant in product.variants %}
              <option value="{{ variant.id }}"
                {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
          >
            {{ variant.title }} - {{ variant.price | money }}
          </option>
        {% endfor %}
       </select>

       <label for="quantity">Qty: </label>
       <select id="quantity" name="quantity">
         {% for i in (1..10) %}
           <option value="{{ i }}">{{ i }}</option>
         {% endfor %}
       </select>

是否可以根据变体更改回调更改 i 值？

Answer 1

您需要检查变体更改的变体数量，并使用 javascript 创建一个选项并将其附加到所选数量。 所以你的代码变成：

 $("#quantity option").remove();
 for(i=1; i<=variant.inventory_quantity;i++){
   $('#quantity').append('<option val='+i+'>'+i+'</option>');
 }

<script>
    // <![CDATA[
    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add-to-cart-button').removeClass('disabled').removeAttr('disabled').html('Add to Cart');
        } else {
          // Variant is sold out.
          $('#add-to-cart-button').html('Sold Out').addClass('disabled').attr('disabled', '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 %}
      // here we add and update the quantity select when variant changed
      $("#quantity option").remove();
      for(i=1; i<=variant.inventory_quantity;i++){
        $('#quantity').append('<option val='+i+'>'+i+'</option>');
      }
      } else {
        // variant doesn't exist.
        $('#add-to-cart-button').val('Unavailable').addClass('disabled').attr('disabled', 'disabled');
      }
    }
    // initialize multi selector for product
    jQuery(function($) {
      new Shopify.OptionSelectors("product-select", { product: {{ product | json }} , onVariantSelected: selectCallback });
    });
    // ]]>
  </script>

Answer 2

使用variant.inventory_quantity；

https://www.shopify.com/partners/shopify-cheat-sheet

<label for="quantity">Qty: </label>
   <select id="quantity" name="quantity">
     {% for i in (1.. variant.inventory_quantity) %}
       <option value="{{ i }}">{{ i }}</option>
     {% endfor %}
   </select>