Выбрать из массива на основе вариантов в магазине

Question

К концу кода у меня есть кнопка, значение которой = "{{product.selected [0] .id}}", она выбирает только первое значение [0] массива независимо от того, что я выбираюПожалуйста, что я должен изменить, чтобы убедиться, что он выбирает значение на основе vaiant?

    <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

На данный момент у вас есть форма в форме, которая является большой НЕТ НЕТ!

{% 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", и все будет хорошо.