0

Shopify ストアでは、ドロップダウンで利用できなくなったサイズを非表示にできるようにする必要があります。Shopify がここで提案するコードを何度も追加しようとしましたが、Retina Out of the Sandbox テーマを使用し、そのコードを product-form.liquid ファイルに追加すると、何があっても 1 つのサイズしか利用できなくなります。売り切れのサイズ 9 があるサイズの商品を顧客が検索すると、ドロップダウンに非表示になっていないため、売り切れと表示されるだけです。ここに私のコードがあります。フォーマットが見栄えがよくない場合はお詫びします。これは私のテーマに付属しているものです。

製品形態.液体

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

1 に答える 1

0

私が気づいたいくつかの小さなこと：

  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 %}
于 2015-01-31T05:23:48.383 に答える