如何在Shopify中对其进行调整，以隐藏不可用的变体？

Question

假设我们有衬衫产品。

变体是样式/大小。

男子:L

男性: XXL

男性: XL

妇女:小

妇女: XL

妇女:l

现在，默认情况下，Shopify，无论您在样式上选择了什么，您仍然可以选择其中的任何一个大小，即使该样式不可用。如何根据您的风格选择强制进行此检查？

我相信主题是使用这种技术的修改版本：javascript

我如何修改这个以隐藏选项，而不只是在不匹配的情况下显示已售罄？

关于主题的真实代码：

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();
    }
  };          
});

产品-形式.液体：

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

Answer 1

参见这篇关于Shopify wiki：如何从选项下拉列表中删除已售罄的变体的文章

因此，在product-form.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 %}

但这只适用于一个选项，而且您有2(样式，大小)。正如本文中所述，使用链接选项解决方案：

1. 在theme.liquid中，在关闭体标记之前，粘贴以下代码：https://gist.github.com/1083007
2. 在调用Shopify.OptionSelectors构造函数之后添加以下代码。(我在下面添加了这段代码片段，并添加了上面的代码片段，以处理具有一个或多个选项的产品。)

{% if product.options.size > 1 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}