我如何在Shopify中调整这一点以隐藏非'；有空吗？

假设我们有衬衫产品

变量是样式/尺寸

男士：L

男：XXL

男士：XL

女士：小

女：XL

女士：L

---

现在，在默认Shopify中，无论您选择什么样式，您仍然可以选择其中任何一种尺寸，即使该样式不适用。如何根据您的样式选择强制执行此检查

---

我相信这个主题使用了这种技术的改进版本：

如何修改此选项以隐藏选项，而不只是在不匹配时显示卖完

真正的主题代码：

app.js

  selectCallback = function(variant, selector) {
    var $product = $('#product-' + selector.product.id);
    var $notify_form = $('#notify-form-' + selector.product.id);

    if (variant) {
      var $thumbs = $('.flex-control-thumbs img', $product);
      var optionValue = variant.options[$('form.product_form', $product).data('option-index')];
      $.each($thumbs, function(index, value) {
        if($(value).attr('alt') == optionValue && !$(value).hasClass('flex-active')) {
          $(value).click();
          return false;
        }
      });
    }

    if (variant && variant.available == true) {
      if(variant.price < variant.compare_at_price){
        $('.was_price', $product).html(Shopify.formatMoney(variant.compare_at_price, $('form.product_form', $product).data('money-format')))        
      } else {
        $('.was_price', $product).text('')
      } 
      $('.sold_out', $product).text('');
      $('.current_price', $product).html(Shopify.formatMoney(variant.price, $('form.product_form', $product).data('money-format')));
      $('#add-to-cart', $product).removeClass('disabled').removeAttr('disabled').val('Add to Cart');
      $notify_form.hide();
    } else {
      var message = variant ? "{{ settings.sold_out_text }}" : "Out of Stock";    
      $('.was_price', $product).text('')
      $('.current_price', $product).text('')
      $('.sold_out', $product).text(message);
      $('#add-to-cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message); 
      $notify_form.fadeIn();
    }
  };          
});

selectCallback=函数（变量、选择器）{
变量$product=$（“#product-”+选择器.product.id）；
var$notify_form=$（'#notify form-'+selector.product.id）；
if（变体）{
变量$thumbs=$（'.flex-control-thumbs-img'，$product）；
var optionValue=variant.options[$（'form.product_form'，$product.data（'option-index'））；
$。每个（$拇指，函数（索引，值）{
if（$（value）.attr（'alt'）==optionValue&&！$（value）.hasClass（'flex-active'））{
$（值）。单击（）；
返回false；
}
});
}
if（variant&&variant.available==true）{
if（variant.price

产品形式。液体：

{% 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 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 %}
      <div class="select">
        <select id="product-select-{{ product.id }}" name='id' class='hi'>
          {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and product.variants.size > 1 %}
      <div class="select">
        <label>{{ product.options[0] }}:</label>
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option 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 %}
       <label for="quantity">Quantity:</label>
       <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
    {% 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" id="add-to-cart" class="action_button" />
    </div>  
  </form>

  {% if product.variants.size > 1 or product.options.size > 1 %}
    <script type="text/javascript">
      // <![CDATA[  
        $(function() {    
          $product = $('#product-' + {{ product.id }});
          if($('.single-option-selector', $product).length == 0) {
            new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });

            {% if product.available %}
              {% 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 %}
                    $('.single-option-selector:eq(' + {{ forloop.index0 }} + ')', $product).val({{ variant.options[forloop.index0] | json }}).trigger('change');
                  {% endfor %}
                {% endif %}
              {% endfor %}
            {% endif %}
          }
        });
      // ]]>
    </script>
  {% endif %}
{% endif %}

{%assign option_to_match=settings.option_to_match%}
{%assign option_index=0%}
{product.options%中的选项为%s}
{%if option==option_to_match%}
{%assign option_index=forloop.index0%}
{%endif%}
{%endfor%}
{%if product.available%}
{%如果product.options.size>1%}
{product.variants%中的变量为%0}
{{variant.title}}
{%endfor%}
{%elsif product.options.size==1和product.variants.size>1%}
{{product.options[0]}}：
{product.variants%中的变量为%0}
{{variant.title}}
{%endfor%}
{%else%}
{%endif%}
{%if settings.display_product_quantity%}
数量：
{%endif%}
{%if settings.cart\u return=='back%}
{%endif%}
{%如果product.variants.size>1或product.options.size>1%}
// 
{%endif%}
{%endif%}

请参见Shopify wiki上的这篇文章：

因此，在您的产品表单.liquid文件的这一行下面：

new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });

添加此代码：

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option:contains({{ variant.title | json }})').remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}

但这只适用于1个选项，您有2个（样式、大小）。正如文章中所说，使用解决方案：

在theme.liquid中，在结束正文标记之前，粘贴以下代码：

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option:contains({{ variant.title | json }})').remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}

在调用

Shopify.OptionSelectors

构造函数后添加以下代码。（我在下面和上面添加了这段代码，以处理具有1个或多个选项的产品。）

---

请参见Shopify wiki上的这篇文章：

因此，在您的产品表单.liquid文件的这一行下面：

new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });

添加此代码：

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option:contains({{ variant.title | json }})').remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}

但这只适用于1个选项，您有2个（样式、大小）。正如文章中所说，使用解决方案：

在theme.liquid中，在结束正文标记之前，粘贴以下代码：

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option:contains({{ variant.title | json }})').remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}

在调用

Shopify.OptionSelectors

构造函数后添加以下代码。（我在下面和上面添加了这段代码，以处理具有1个或多个选项的产品。）