Shopify - скрытие распроданных вариантов в выпадающем списке (обычное решение не работает)

Question

В моем магазине Shopify мне нужно иметь возможность скрыть размеры в выпадающем списке, которые больше не доступны. Я несколько раз пытался добавить код, который предлагает Shopify, но я использую тему "Retina Out of the Sandbox" и добавляю этот код в файл product-form.liquid, и получается только один размер, несмотря ни на что. Мой магазин остро нуждается в этой функции, потому что мы продаем тонны распродажи обуви, которая больше не доступна, поэтому, когда покупатель ищет товары, размер которых уже распродан, размер 9 все равно отображается, потому что он не скрыт в раскрывающемся списке, он просто говорит: "Продано". А вот и мой код. Извините, если форматирование выглядит не очень хорошо, это то, что пришло с моей темой.

продукт-form.liquid

    {% if product.available %}
  <form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" id="product-form-{{ product.id }}">

    {% if settings.display_inventory_left %}
      <div class="items_left">
        {% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
          <p><em>{{ product.variants.first.inventory_quantity }} {{ settings.inventory_left_text | escape }}</em></p>
        {% endif %}
      </div>
    {% endif %}

    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
      <div class="select">
        <label>{{ product.options[0] }}:</label>
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} 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 %}
      <div class="left">
        <label for="quantity">Quantity:</label>
        <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
      </div>
    {% 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="{{ settings.add_to_cart_text | escape }}" class="action_button add_to_cart" />
    </div>  
  </form>

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

              {% if product.options.size == 0 %}
                {% for variant in product.variants %}
                  {% unless variant.available %}
                    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
                  {% endunless %}
                {% endfor %}
                jQuery('.single-option-selector').trigger('change');
              {% endif %}     

      // ]]>
    </script>
  {% endif %}
{% endif %}

Answer 1

Пара небольших вещей, которые я заметил:

1. {% if product.options.size == 0 %} должно быть {% if product.options.size == 1 %} ( см. здесь).
2. Вам не хватает закрывающих скобок для $(function() {..., Тебе нужно }); до закрытия </script> тег.

Кажется, это работает для меня сейчас:

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

        {% if product.options.size == 1 %} // *** should be 1, not 0 ***
          {% for variant in product.variants %}
            {% unless variant.available %}
              jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
            {% endunless %}
          {% endfor %}
          jQuery('.single-option-selector').trigger('change');
        {% endif %}     
      }); // *** missing closing brackets here ***
    // ]]>
  </script>
{% endif %}