自定義Shopify產品頁面上的下拉菜單（單個變體）

Question

在產品頁面下拉菜單中使用Shopify中的一種變體，並希望它在不可用時變灰（售罄）。

這是我到目前為止的代碼：（針對整個頁面）

    {% include 'buyx-product' with product %}
    {% include 'buyx-price-min' with product %} 
    {% assign option_to_match = settings.option_to_match %}
    {% assign option_index = 0 %}
    {% for option in product.options %}
     {% if option == option_to_match %}
     {% assign option_index = forloop.index0 %}
    {% endif %}
    {% endfor %}
    {% if buyx_product_available %}
    <form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
    {% if product.options.size > 1  and (product.options[1] != "BuyXDiscount") %}
      <div class="select">
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
          {% unless variant.title contains '% Off' %}
            <option value="{{ variant.id }}">{{ variant.title }}</option>
     {% endunless %}
          {% endfor %}
        </select>
       </div>
      {% elsif buyx_select_one_option and (product.variants.size > 1 or product.options[0] != "Title" or product.options.first != 'BuyXDiscount') %}
       <div class="select">
        <label>{{ product.options[0] }}:</label>
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
          {% unless variant.title contains '% Off' %}
            <option value="{{ variant.id }}">{{ variant.title }}</option>
        {% endunless %}
          {% endfor %}
        </select>
       </div>
       {% else %}
       <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
       {% endif %}
       {% include 'swatch' with 'Color' %}
       {% if settings.display_product_quantity %}
       <div class="left">
        <label for="quantity">Quantity:</label>
        <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
      </div>
     {% endif %}
     <div class="purchase clearfix {% if settings.display_product_quantity %}inline_purchase{% endif %}">
       {% if settings.cart_return == 'back' %}
        <input type="hidden" name="return_to" value="back" />
       {% endif %}
       <input type="submit" name="add" value="Add to Cart" class="action_button add_to_cart" />
      </div>
      <script data-product="{{ product | json | escape }}" id="out-of-stock" src="http://setup.shopapps.io/out-of-stock/script/nisolo.js"></script>
   </form>
             {% if buyx_product_variants_size > 1 %} 
             <script type="text/javascript">
            // <![CDATA[
            $(function() {
         function buyx_product_json(product) {
         var variants = []
         //does it have BuyXDiscount option?
         var option_position = -1
         for (var oi = 0, olen = product.options.length; oi < olen; oi++) {
          if (product.options[oi] == "BuyXDiscount") {
             option_position = oi+1
             break
         }
     }
     if (option_position == -1) {
         return product
     }
     if (product.options.length > 1) {
          product.options.splice(option_position-1, 1)
     } else {
          product.options[0] = "Title"
     }
     option_position = "option" + option_position
     product.available = false
     for (var vi = 0, vlen = product.variants.length; vi < vlen; vi++) {
         if (product.variants[vi][option_position] == "Default") {
             product.variants[vi][option_position] = ""
             variants.push(product.variants[vi])
             product.available = product.available || product.variants[vi].available
         }
     }
     product.variants = variants
     return product
     }

       <strong>$product = $('#product-' + {{ product.id }});
    //          if($('.single-option-selector', $product).length == 0) {
            new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: buyx_product_json({{ product | json }}), onVariantSelected: selectCallback });
            {% if product.available %}
              {% assign found_one_in_stock = true %}
              {% for variant in product.variants %}
                {% if variant.available == false %}
                    jQuery('.single-option-selector option:eq({{ forloop.index0 }})').attr('disabled', 'disabled');
                {% endif %}
              {% endfor %}
            {% endif %}</strong>
          //}
        });
      // ]]>
     </script>
     {% endif %}
     {% endif %}

不幸的是，發生了什么事是不是跟0庫存的產品被變灰，0庫存的產品之前 ，該產品正在變灰。 例如，在下面的屏幕截圖中，尺寸9.5是零庫存的尺寸，但是尺寸9顯示為灰色。

Answer 1

當我手動說時，我的意思是這樣的...

<select>
{% for variant in product.variants %}
  {% if variant.available %}
    <option value="{{variant.id}}">{{variant.title}}</option>
  {% else %}
    <option value="{{variant.id}}" disabled>{{variant.title}}</option>
  {% endif %}
{% endfor %}
</select>

Answer 2

也許您可以選擇帶有相應變體標題或ID的選項，而不是使用for循環索引？ 像這樣：

{% unless variant.available %}
  jQuery('.single-option-selector option[value="{{ variant.title }}"]').attr('disabled', 'disabled');
{% endunless %}

這個答案可能也很有用 ：

jQuery('.single-option-selector option:contains({{ variant.title | json }})')...

盡管option:contains在尺寸為9和9.5的情況下可能無法使用。

編輯：

在您提供的鏈接中，“大小”為option2 ，因此請嘗試以下操作：

jQuery('.single-option-selector option[value="{{ variant.option2 }}"]').attr('disabled', 'disabled');