將產品添加到購物車時，將為該產品添加默認選項，但不添加所選選項

Question

我已經為這個問題苦苦掙扎了2天。 在我的商店中，每種產品都有2種選擇：尺寸和顏色（T恤）。 有任何shopify專家在嗎？ 商店：nosmallplan-dev.myshopify.com密碼：nsp我使用ajaxify購物車。 在產品液體中，我有以下代碼：

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

但是，具有默認大小和顏色的產品始終添加到購物車，即使您選擇其他選項也沒關系。 在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
           }
       }
   );
});

Answer 2

您必須以這樣的方式添加js：單擊大小和顏色時，必須相應地更改select選項。 這樣，您可以使用ajax將產品添加到具有選定選項的購物車中。

謝謝