I’m trying to remove a product from the cart using the Shopify Ajax API, but the product isn’t getting removed and I get an Unexpected token: ':'
error in the console.
$(".slide-cart-remove").on("click", function() {
var id = $(this).attr("id");
jQuery.post('/cart/update.js', {updates: {id: 0}});
});
On the click of the “remove” button, I’m calling the API to update its quantity to 0. The “remove” button’s ID is the variant_id
of the product I’m trying to remove, which is why I’m passing it.
This is how I give it the same ID as the variant_id
, if it makes any difference:
$(productRemove).attr("id", data.items[i].variant_id);
Is there something I’m missing in the syntax?
EDIT: As mentioned below, I tried changing the syntax to this:
jQuery.post('/cart/update.js', {quantity: 0, id: varId});
However, it still doesn’t seem to work. (note that the varId
variable contains a real variation ID of a product that is in the cart)
2
Answers
You can use the Shopify Documentation to figure this one out. Your attempt to POST to the update.js endpoint is failing as your setup is incorrect. See the correct way to call this endpoint here:
https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#update-cart
I had trouble with this as well, as I was trying to remove certain items in the cart. Once I added
contentType: 'application/json'
and stringified the data I was posting (ex.JSON.stringify(data)
) I was successful.