Shopify Ajax API - /cart/update.js not working to update product quantity

Question

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 )

Answer 1

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

Answer 2

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.