我正在尝试创建将特定数量的产品添加到购物车的按钮,因此我修改了 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>
答案 0 :(得分: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 而不是 Liquid。您可以使用 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>