Shopify - Скрытие вариантов распродаж при выпадающем меню (регулярное решение не работает)

Question

В моем магазине Shopify мне нужно убрать размеры в раскрывающемся списке, которые больше не доступны. Я несколько раз пытался добавить код, который предлагает Shopify here, но я использую тему 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 %} (see here).
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 %}