Question

在代码末尾，我有一个按钮，其值=“ {{product.selected [0] .id}}”，无论我选择什么，它都只会选择数组的第一个值[0] ，请确保更改以确保其根据有效值选择一个值？

    <div>
        {% if section.settings.show_quantity_selector %}
        <div id="error-quantity-{{ section.id }}" class="form-message form-message--error product__quantity-error hide" tabindex="-1">
          {% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
        </div>
        {% endif %}

      {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
        {% unless product.has_only_default_variant %}
          {% 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-{{ section.id }} 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 %}


  <!-- Partie Product select -->    

        <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
          {% 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>
          {% endif %}
          {% endfor %}
        </select>
  <!-- END Partie Product select -->   

   <div>
      <form class="product-form" action="/cart/add" data-productid="{{product.id}}" method="post" style="padding-top: 0px; padding-bottom: 50px"> 
        <input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.selected[0].id }}" data-variant-title="{{ product.variants[0].title }}"/>
<input type="submit" value="Add To Cart" class="btn btn btn-default"/>
      </form>
    </div>
      {% endform %}
    </div>

谢谢!!

Answer 1

此刻，您有一个表单，这是一个很大的NO NO！

{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
   ...
   <form class="product-form" action="/cart/add" data-productid="{{product.id}}" method="post" style="padding-top: 0px; padding-bottom: 50px">

此外，您还有两个带有name="id"的字段。

<select name="id" id="ProductSelect-{{ section.id }}"

和

<input type="hidden" name="id"

使用name="id"删除内部表单和隐藏字段，您应该会很好。

根据shopify中的变体从数组中选择

1 个答案: