javascript - 将产品添加到购物车时，会为产品添加默认选项，但不会添加选定的选项

Question

我已经为这个问题苦苦挣扎了两天。在我的商店中，每种产品都有 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
           }
       }
   );
});