添加到购物车表单不将项目添加到购物车

Question

我正在尝试创建将特定数量的产品添加到购物车的按钮，因此我修改了 Shopify 中产品页面自动生成的表单，但我的代码似乎不会从任何产品中添加任何产品我的 3 个按钮到购物车页面。我创建了 3 个不同的 ID，因为每个按钮都发布相同的产品，但该产品的数量不同。它也有不同的描述，否则我会将其保留为 1 ID 以保持简单。

<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
        {% for variant in product.variants %}
          {% if variant.available %}
            <option value="{{ variant.id }}">
              {{ variant.title }} - {{ variant.price | money_with_currency }}
            </option>
          {% else %}
            <option disabled="disabled">
              {{ variant.title }} - sold out
            </option>
          {% endif %}
        {% endfor %}
      {{ current_variant.price | money }}
      <input type="hidden" id="Quantity" name="quantity" value="1" min="1">
      <input type="submit" class="two-cans" name="id" quantity="1" id="6556104458433" value="Get 2 Cans"/>
      <input type="submit" class="four-cans" name="id" quantity="2" id="6556136014017" value="Get 4 Cans"/>
      <input type="submit" class="six-cans" name="id" quantity="3" id="6556139389121" value="Get 6 Cans"/>
    </form>

Answer 1

在提交按钮上添加 id 属性不会达到您期望的效果，因为它与产品或变体的实际 Shopify id 无关。 quantity 属性本身不做任何事情，所以它也不起作用。

典型的添加到购物车表单如下所示：

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form> 

对于您的特定用例，一个好的方法是使用 JS 而不是液体。您可以使用 Shopify 的 REST Api，首先用简单的按钮替换提交输入并将它们移出表单：

<button class="custom-submit-button two-cans" name="id" quantity="2" id="6556104458433">Get 2 Cans</button>
<button class="custom-submit-button four-cans" name="id" quantity="4" id="6556136014017">Get 4 Cans</button>
<button class="custom-submit-button six-cans" name="id" quantity="6" id="6556139389121">Get 6 Cans</button>

然后添加一点 jQuery 来处理请求：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  function addItemToCart(variant_id, qty) {
    var data = {
      "id": variant_id,
      "quantity": qty
    }

    $.ajax({
      type: 'POST',
      url: '/cart/add.js',
      data: data,
      dataType: 'json',
      success: function() { 
        location.reload();
      }
    });
}
  
$('.custom-submit-button').click(function(){    
    addItemToCart($(this).attr("id"), $(this).attr("quantity"));
});
</script>