Добавить в корзину - перейти от выпадающего варианта к кнопке «Добавить в корзину» на отдельную кнопку «Добавить в корзину» для каждого варианта на Shopify / Liquid

Question

У меня есть следующий код на 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>

Если кто-нибудь знает, как изменить приведенный выше код для этого запроса, это было бы удивительно!

Большое спасибо.

Исходный формат

Новый требуемый формат (одна кнопка)

Answer 1

Да, просто преобразуйте каждый вариант в форму с кнопкой для добавления.

{%- 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 -%}