如何在Shopify中隐藏不可用的产品变体？

Question

我正在尝试仅在this one等产品的下拉列表中显示可用的产品变体。例如，假设您在第一个下拉列表中选择2012，它将仅显示第二个下拉列表中的可用选项。如果你在第二次选择7月25日星期三，那么它只会在第三个中显示可用的变体。在那一刻，它显示所有选择和状态'我们不提供此组合中的产品'作为不可用的选择。

到目前为止，我的product.liquid页面有以下代码：

<div class="col-7 product-description clearfix">
<h1>{{ product.title }}</h1>

{{ product.description }}
    {% include 'addthis' %}
    <br/><br/>

{% if product.available  %} 
    {% if product.variants.size > 1 %}
    <!-- If the product only has MULTIPLE OPTIONS -->
    <form action="/cart/add" method="post" class="product-variants">     
        <div id="options">
            <select id="product-select" name='id'>
                {% for variant in product.variants %}
                    <option value="{{ variant.id }}">{{ variant.title }}</option>
                {% endfor %}
            </select>
            <div class="select-wrapper">
              <label for="region">DVD Region</label>
              <select id="color" required>
                <option value="NTSC">NTSC</option>
                <option value="PAL/SECAM" selected="selected">PAL/SECAM</option>
              </select>
            </div>
            <p><a href="http://www.videouniversity.com/articles/world-wide-tv-standards/" target="_blank">Click Here</a> find out more about your region.</p>

        </div> <!-- options --> 

        <div class="price-field"></div>
        <input type="submit"  name="add" value="Add to cart" id="purchase" />
    </form>

{% else %}
    <!-- If the product only has ONE variant -->
    <form action="/cart/add" method="post" class="product-variants">     
        <div class="price-field"> {{ product.price | money }}</div>
        <input type="submit"  name="add" value="Add to cart" id="purchase" />
        <input  type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" /> <!-- passes variant id -->
    </form>
{% endif %}

{% else %}
    <p>This product is not available</p>
{% endif %}  

</div><!-- .col-7 -->

<div class="col-5 last product-thumbs">
<ul>
{% for image in product.images %}
    {% if forloop.first %}
        <li class="featured-image" >
            <a class="zoom " href="{{ image | product_img_url: 'large' }}" title="{{ product.featured_image.alt | escape }}">
                <img  src="{{ image | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
            </a>
        </li>
        {% else %}
        <li>
            <a class="zoom" href="{{ image | product_img_url: 'large' }}" title="{{ image.alt | esacpe }}">
                <img class="" src="{{ image | product_img_url: 'small' }}" alt="{{ image.alt | escape }}" />
            </a>
        </li>
    {% endif %}
 {% endfor %}
</ul>
</div><!-- .col-5 -->

<script type="text/javascript">
// <![CDATA[  
var selectCallback = function(variant, selector) {
  if (variant && variant.available == true) {
    // selected a valid variant
    jQuery('#purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
    jQuery('#purchase').fadeIn();
    jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));  // update price field
  } else {
    // variant doesn't exist
    jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button
    jQuery('#purchase').fadeOut();
    var message = variant ? "Sold Out" : "We don't offer the product in this combination"; 
    jQuery('.price-field').text(message); // update price-field message
  }
};


// initialize multi selector for product      
jQuery(document).ready(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
   {% assign found_one_in_stock = false %}
  {% for variant in product.variants %}
    {% if variant.available and found_one_in_stock == false %}
      {% assign found_one_in_stock = true %}
      {% for option in product.options %}
        jQuery('.single-option-selector:eq(' + {{ forloop.index0 }} + ')').val({{ variant.options[forloop.index0] | json }}).trigger('change');
      {% endfor %}
    {% endif %}
  {% endfor %}
  $('#options div').addClass("selector-wrapper");
  {% if product.options.size == 1 %}
    $(".selector-wrapper").append("<label>{{ product.options.first }}</label>");
  {% endif %}
});   
// ]]>  
</script>

任何帮助？