Wenn Produkt zum Warenkorb hinzugefügt wird, werden Standardoptionen für das Produkt hinzugefügt, aber keine ausgewählten

Question

Ich habe seit 2 Tagen mit diesem Problem gekämpft. In meinem Geschäft hat jedes Produkt 2 Optionen: Größe und Farben (Tshirts). Irgendwelche Experten sind hier? Store: nosmallplan-dev.myshopify.com Pass: nsp Ich benutze Ajaxify Warenkorb. Auch in Flüssigkeit habe ich diesen Code:

<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> 

Aber Produkt mit Standardgröße und Farbe wird immer in den Warenkorb gelegt, spielt keine Rolle, auch wenn Sie eine andere Option wählen. In Cart.liquid ich habe diesen Code:

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

</p> 

Ich glaube, das Code für das Zeigen erste Option verantwortlich ist. Wie kann ich es ändern, um ausgewählte Option anzuzeigen, und wenn keine ausgewählt ist, dann erste Option?

Danke !!!

Answer 1

Sie sollten mit der Liste aller Varianten und sichtbar Dropdown-Listen oder jede Option versteckte Drop-down haben. Zum Beispiel:

Statt Code mit verstecktem wählen, fügen Sie bitte diesen Code:

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

Darüber hinaus müssen Sie diese JS hinzuzufügen, die den verborgenen Auswahlwert ändern, wenn Sie sichtbare Dropdown-Listen für Produktwechsel Optionen:

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