shopify - 如何在 Shopify 中调整此设置以隐藏不可用的变体？

Question

假设我们有衬衫产品。

变体是款式/尺寸。

男士:L

男士:XXL

男士:XL

女性:小号

女式:XL

女性:L

---

目前，在默认的 Shopify 中，无论您选择什么款式，您仍然可以选择任何尺寸，即使该尺寸不适用于该款式。如何根据您的风格选择强制进行此检查？

---

我相信主题正在使用此技术的修改版本:http://wiki.shopify.com/Tutorial_on_editing_existing_theme_to_use_products_with_multiple_options#4._Instantiate_Shopify.OptionSelectors_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 上的这篇文章:How do I remove sold out variants from my options drop-downs

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

但这仅适用于 1 个选项，而您有 2 个选项(样式、尺寸)。正如文章中所说，使用 Linked Options解决办法:

1. 在 theme.liquid 的结束 body 标记之前，粘贴以下代码:https://gist.github.com/1083007

2. 在调用 Shopify.OptionSelectors 构造函数后添加以下代码。 (我添加了下面的代码片段和上面的代码片段来处理具有 1 个或多个选项的产品。)

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