Shopify - 在下拉菜单中隐藏售罄的变体(常规解决方案不起作用)

Question

在我的 Shopify 商店中，我需要能够在下拉列表中隐藏不再可用的尺寸。我已经多次尝试添加代码 Shopify 在这里建议，但我使用的是 视网膜 沙盒外主题并将该代码添加到产品表单.liquid 文件中，无论如何，发生的事情是只有 1 种尺寸可用。我的商店迫切需要此功能，因为我们出售大量不再可用的收尾鞋，因此当客户搜索售罄的尺码产品时，仍然显示 9 码，因为它没有隐藏在下拉菜单中，它只是说售罄，这是我的代码。抱歉，如果格式不是那么好看，这就是我的主题附带的内容。

产品形态.液体

    {% if product.available %}
  <form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" id="product-form-{{ product.id }}">
    {% if settings.display_inventory_left %}
      <div class="items_left">
        {% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
          <p><em>{{ product.variants.first.inventory_quantity }} {{ settings.inventory_left_text | escape }}</em></p>
        {% endif %}
      </div>
    {% endif %}
    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
      <div class="select">
        <label>{{ product.options[0] }}:</label>
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    {% endif %}
    {% 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="{{ settings.add_to_cart_text | escape }}" class="action_button add_to_cart" />
    </div>  
  </form>
  {% if product.variants.size > 1 or product.options.size > 1 %}
    <script type="text/javascript">
      // <![CDATA[  
        $(function() {    
          $product = $('#product-' + {{ product.id }});
          new Shopify.OptionSelectors
            ("product-select-{{ product.id }}",{ 
              product: {{ product | json }}, 
              onVariantSelected: selectCallback{% if product-form == 'product' %}, 
              enableHistoryState: true{% endif %} 
            });
              {% if product.options.size == 0 %}
                {% for variant in product.variants %}
                  {% unless variant.available %}
                    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
                  {% endunless %}
                {% endfor %}
                jQuery('.single-option-selector').trigger('change');
              {% endif %}     
      // ]]>
    </script>
  {% endif %}
{% endif %}

Answer 1

我注意到的几件小事：

1. {% if product.options.size == 0 %}应该是{% if product.options.size == 1 %}的（见这里）。
2. 您缺少$(function() {...的右括号。您需要在结束</script>标记之前});。

这现在似乎对我有用：

{% if product.variants.size > 1 or product.options.size > 1 %}
  <script type="text/javascript">
    // <![CDATA[  
      $(function() {    
        $product = $('#product-' + {{ product.id }});
        new Shopify.OptionSelectors
          ("product-select-{{ product.id }}",{ 
            product: {{ product | json }}, 
            onVariantSelected: selectCallback{% if product-form == 'product' %}, 
            enableHistoryState: true{% endif %} 
          });
        {% if product.options.size == 1 %} // *** should be 1, not 0 ***
          {% for variant in product.variants %}
            {% unless variant.available %}
              jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
            {% endunless %}
          {% endfor %}
          jQuery('.single-option-selector').trigger('change');
        {% endif %}     
      }); // *** missing closing brackets here ***
    // ]]>
  </script>
{% endif %}