Add to cart form not adding items to cart - shopify

Question

I'm trying to create buttons that add specific quantities of a product to the cart, so I modified the form that is automatically generated by the product page in Shopify, but it seems my code won't add any products from any of my 3 buttons to the cart page. I created 3 different IDs because each button posts the same product but a different quantity of that product. It also has a different description otherwise I would just leave it as 1 ID to keep it simple.
<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

Adding the id attribute on a submit button will not do what you expect it to do, as it has nothing to do with the actual Shopify id of a product or a variant.
The quantity attribute does not do anything by itself, so that will not work either.
A typical add to cart form will look something like this:
<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>
For your specific use case, a good approach would be using JS instead of liquid. You can use Shopify's REST Api, start by replacing the submit inputs with simple buttons and moving them outside of the form:
<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>
Then adding a bit of jQuery to handle the requests:
<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>