在 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 %}

This answer might also be useful:

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');