Shopify - 在下拉列表中隐藏已售罄的变体(常规解决方案无法正常工作)

时间:2015-01-21 19:30:07

标签: shopify liquid variants

在我的Shopify商店中,我需要能够隐藏下拉列表中不再可用的尺寸。我已多次尝试添加Shopify建议的代码here,但我使用的是Retina Out of the Sandbox主题并将该代码添加到product-form.liquid文件中,所发生的事情只有1个大小可用,无论如何什么。我的商店迫切需要这个功能,因为我们销售了大量不再可用的收尾鞋,因此当客户搜索尺寸为9的产品仍然显示时,因为它没有隐藏在下拉列表中,它只是说已售出出来,这是我的代码。抱歉,如果格式不是很好看,这就是我的主题。

产品form.liquid

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

1 个答案:

答案 0 :(得分:0)

我发现了几件小事:

  1. {% if product.options.size == 0 %}应为{% if product.options.size == 1 %}see here)。
  2. 您错过了$(function() {...的右括号。在结束});代码之前,您需要</script>
  3. 这似乎对我有用:

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