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

产品form.liquid：

{% 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解决方案：

在theme.liquid中，在结束正文标记之前，粘贴此代码：https://gist.github.com/1083007
在调用Shopify.OptionSelectors构造函数后添加以下代码。（我在下面添加了这个片段和上面的片段来处理带有1个或更多选项的产品。）

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

如何在Shopify中调整此项以隐藏不可用的变体？

1 个答案: