404 on /cart/update.js when I try to remove a product from cart via AJAX

Romina_Barrett1
Shopify Partner
10 0 2

Hi everyone,

I'm just trying to write a simple function that removes a product from the cart via AJAX when a button is clicked.  The pertinent parts of my code:

In my template:

{% for item in cart.items %}

{{ item.title }}

<!-- the button to remove the item -->

<a href="#" data-id="{{item.variant_id}}" class="slide-remove-item" title="Remove Item">Remove</a>

{% endfor %}

My javascript:

$('.slide-remove-item').on('click', function(event){
  event.preventDefault();
  var productId = parseInt($(this).attr('data-id'));

    jQuery.post('/cart/update.js', {updates: {productId: 0}})
      .done(function() {
        console.log("success");
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
   });
});

I keep hitting a 404 on /cart/updates.js (although this file looks fine when I open it in a new tab).  I'm following documentation explicitly (as far as I can tell).. What am I missing?

0 Likes
Romina_Barrett1
Shopify Partner
10 0 2

It seems when I hard-code in the variant id into the function it works correctly.. obviously this isn't ideal though.

0 Likes
Gavinator
Shopify Partner
1253 6 98

Maybe try the alternate format:

jQuery.post('/cart/update.js', {quantity: 0, id: productId})

(from the docs)

www.bookthatapp.com
Romina_Barrett1
Shopify Partner
10 0 2

Thanks BBG!  I actually found that this format worked:

jQuery.post('/cart/update.js', 'updates['+productId+']=0')

 

navjeet13
New Member
1 0 0

This code not working for last item of the cart.

 

Do you have any solution for the same?

0 Likes