カートに商品を追加すると、商品にデフォルトオプションが追加されますが、選択されていない商品は追加されます

Question

私はこの問題を2日間苦労しています。私の店では、各製品に2つのオプションがあります：サイズと色（Tシャツ）。どんな専門家がいますか？ 店舗：nosmallplan-dev.myshopify.com パス：nsp 私はajaxify cartを使用しています。製品の液体で、私はこのコードを持っている：デフォルトのサイズと色で

<div style="display:none;""> 
     {% if product.variants.size > 1 %} 
     <select id="product-select" name="id"> 
     {% for variant in product.variants %} 
      {% if variant.available %} 
      <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }} - {{ variant.sku }}</option> 
      {% else %} 
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> 
      {% endif %} 
     {% endfor %} 
     </select> 
     {% endif %} 
     </div> 

しかし、製品を常にdoesntの問題、あなたは別のオプションを選択した場合でも、カートに追加されます。 Cart.liquidで は、私はこのコードを持っている：

<p class="cart__product--details"> 
     {% if item.product.variants.size > 1 %} 
     {{ item.product.options[0] }}: {{item.variant.title}} 
     {% endif %} 

</p> 

私は、このコードは最初のオプションを示すために責任があると信じています。 選択したオプションを表示するように変更するにはどうしたらいいですか？

ありがとうございました！

Answer 1

あなたはすべての亜種と可視ドロップダウンまたは各オプションのリストを隠しドロップダウンを持っている必要があります。たとえば：代わりに隠された選択を使用して、コードの

は、このコードを追加してください：

{% unless product == empty %} 
    <script type="application/json" id="ProductJson"> 
    {{ product | json }} 
    </script> 
{% endunless %} 

{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %} 
    {% for option in product.options_with_values %} 
     <div class="selector-wrapper js product-form__item"> 
      <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}"> 
      {{ option.name }} 
      </label> 
      <select class="single-option-selector single-option-selector product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}"> 
      {% for value in option.values %} 
       <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option> 
      {% endfor %} 
      </select> 
     </div> 
    {% endfor %} 
{% endunless %} 

<select name="id" id="ProductSelect" data-section="{{ section.id }}" class="product-form__variants no-js" style="display:none;"> 
    {% for variant in product.variants %} 
    {% if variant.available %} 
     <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}"> 
     {{ variant.title }} 
     </option> 
    {% else %} 
     <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option> 
    {% endif %} 
    {% endfor %} 
</select> 

はまた、あなたが製品に見えるのドロップダウンを変更隠された選択値を、変更されており、これはJS追加する必要がありますオプション：

$(document).ready(function() { 
    $('.single-option-selector').on(
     'change', 
     function() { 
      var selectedValues = $.map(
       $('.single-option-selector'), 
       function(element) { 
        var $element = $(element); 
        var type = $element.attr('type'); 
        var currentOption = {}; 

        if (type === 'radio' || type === 'checkbox') { 
         if ($element[0].checked) { 
          currentOption.value = $element.val(); 
          currentOption.index = $element.data('index'); 

          return currentOption; 
         } else { 
          return false; 
         } 
        } else { 
         currentOption.value = $element.val(); 
         currentOption.index = $element.data('index'); 

         return currentOption; 
        } 
       } 
      ); 
      var product = JSON.parse(
       document.getElementById('ProductJson').innerHTML 
      ); 
      var variant = product.variants.filter(function(v) { 
       var condition = selectedValues.every(function(values) { 
        return v[values.index] == values.value; 
       }); 
       return condition; 
      }); 
      if (variant != null && variant.length == 1) { 
       $('#ProductSelect').val(variant[0].id); 
      } 
      else { 
      //disable add to cart button 
      } 
     } 
    ); 
});