Select 添加到购物车-对于Shopify/Liquid上的每个变量，从使用添加到购物车按钮选择的下拉变量更改为单个添加到购物车按钮

我在Shopify/Liquid上有以下代码，用于向购物车添加产品的变体。我想把它从一个带有“添加到购物车”按钮的下拉列表改为只有一个按钮来添加购物车的大小。这将最终导致为每个尺寸选项添加多个按钮。我的代码如下：

        <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix">
          {% if product.variants.size > 1 %}
            <select id="product-select-{{ product.id }}" name='id' class="text-center">
            {% for variant in product.variants %}
            {% if variant.available %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }}</option>
            {% else %}
              <option disabled="disabled">
              {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
            {% endfor %}
            </select>
            {% else %}
              <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            {% endif %}

            {% if product.available %}
              <button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add To Cart</button>
            {% else %}
              <h6>Out of Stock</h6>
            {% endif %}
          </form>

{%如果product.variants.size>1%}
{product.variants%中的变量为%0}
{%if variant.available%}
{{variant.title}}
{%else%}
{{variant.title}}-{{'products.product.salled|t}
{%endif%}
{%endfor%}
{%else%}
{%endif%}
{%if product.available%}
添加到购物车
{%else%}
缺货
{%endif%}

如果有人知道如何更改此请求的上述代码，那将是令人惊讶的

非常感谢

---

是的，只需将每个变体转换为一个表单，并添加一个按钮即可

{%- for variant in product.variants -%}
  {%- unless variant.available -%}
    {%- continue -%}
  {%- endunless -%}

  <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix">
    <input type="hidden" name="id" value="{{ variant.id }}" />
    <button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add {{ variant.title }}</button>
  </form>
{%- endfor -%}

{%-用于product.variants-%}
{%-除非variant.available-%}
{%-continue-%}
{%-end除非-%}
添加{{variant.title}}
{%-endfor-%}

是的，只需将每个变体转换为一个表单，并添加一个按钮即可

{%- for variant in product.variants -%}
  {%- unless variant.available -%}
    {%- continue -%}
  {%- endunless -%}

  <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix">
    <input type="hidden" name="id" value="{{ variant.id }}" />
    <button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add {{ variant.title }}</button>
  </form>
{%- endfor -%}

{%-用于product.variants-%}
{%-除非variant.available-%}
{%-continue-%}
{%-end除非-%}
添加{{variant.title}}
{%-endfor-%}

太好了，谢谢。虽然这是可行的，但单击它之后，它会将我带到购物车页面并添加它，而我不需要在单击时更改用户页面。你知道我该怎么解决这个问题吗？谢谢你的意思是你想用AJAX添加到购物车中吗？这很好用，有没有一种方法我可以只选择其中一种而不是全部？Thanks@Sophia_xoox，不知道你是什么意思，你能解释一下用例吗？太好了，谢谢。虽然这是可行的，但单击它之后，它会将我带到购物车页面并添加它，而我不需要在单击时更改用户页面。你知道我该怎么解决这个问题吗？谢谢你的意思是你想用AJAX添加到购物车中吗？这很好用，有没有一种方法我可以只选择其中一种而不是全部？Thanks@Sophia_xoox，不知道你是什么意思，你能解释一下用例吗？