Craft Commerce 2 Ajax Add to Cart Trying to ajax add to cart but each submit returns a 

https://www.website.com/commerce/cart/updateCart 404 (Not Found)


I have this in my twig template:

{% for book in craft.products().type('books').limit(8).all() %}
&lt;a href="{{ book.url }}" class="book"&gt;
    {% for image in book.productImages.limit(1).all() %}
    &lt;div class="b-img"&gt;
        &lt;img src="{{ image.getUrl() }}" /&gt;
        &lt;div class="hover-cart"&gt;
            &lt;div class="success"&gt;&lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;&lt;/div&gt;
            {% set variant = book.defaultVariant %}
            &lt;form method="POST" class="add-to-cart"&gt;
                {{ csrfInput() }}
                &lt;input type="hidden" name="purchasableId" value="{{ variant.id }}"&gt;
                &lt;input type="number" name="qty" value="1"&gt;
                &lt;button type="submit"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    {% endfor %}
    &lt;h3&gt;{{ book.title }}&lt;/h3&gt;
    &lt;span class="price"&gt;{{ book.defaultVariant.price|currency }}&lt;/span&gt;
&lt;/a&gt;
{% endfor %}


And this as my javascript:

$('.add-to-cart').on('submit', function(e) {
    console.log('add to cart clicked');
    e.preventDefault();
    var form_data = $(this).serializeArray();
    console.log(form_data);
    $.ajax({
        type: 'post',
        url: 'commerce/cart/updateCart',
        data: form_data,
        success: function(response) {
            if (response.success) {
                console.log('success');
                console.log(response.success);
                $(this).hide();
                $(this).siblings('.success').show();
                $(this).parents('.hover-cart').fadeOut();
            }
            else {
                console.log('error');
                console.log(response.success);
                alert("We're sorry, but the item couldn't be added to your cart. Please try again. If the issue persists, please send an email to webmaster@lwf.org");
            }
        }
    });        
});
Controllers in Craft 3/Commerce 2 use kebab-case (update-cart) instead of camelCase (updateCate), so adjusting that may correct your issue.

The common convention for forms processed by Craft controllers is to leave the action attribute blank and include a hidden input with the action URL value.

In your example, you can do that by adding an action param to your form_data variable

var form_data = $(this).serializeArray();
// Add the action URL to the submitted data
form_data['action'] = 'commerce/cart/update-cart'


Then you'd leave the url param on your Ajax request blank. The updated code would look something like this if you add the action in your script.

$('.add-to-cart').on('submit', function(e) {
    console.log('add to cart clicked');
    e.preventDefault();
    var form_data = $(this).serializeArray();
    // Add the action URL to the submitted data
    form_data['action'] = 'commerce/cart/update-cart'
    console.log(form_data);
    $.ajax({
        type: 'post',
        url: '',
        data: form_data,
        dataType: 'json',
        success: function(response) {
            if (response.success) {
                console.log('success');
                console.log(response.success);
                $(this).hide();
                $(this).siblings('.success').show();
                $(this).parents('.hover-cart').fadeOut();
            }
            else {
                console.log('error');
                console.log(response.success);
                alert("We're sorry, but the item couldn't be added to your cart. Please try again. If the issue persists, please send an email to webmaster@lwf.org");
            }
        }
    });        
});


or the snippet below if you want to add the action to your Twig template

&lt;form method="POST" class="add-to-cart"&gt;
    {{ csrfInput() }}
    {# Include the controller used to process the form  #}
    &lt;input type="hidden" name="action" value="commerce/cart/update-cart"&gt;
    &lt;input type="hidden" name="purchasableId" value="{{ variant.id }}"&gt;
    &lt;input type="number" name="qty" value="1"&gt;
    &lt;button type="submit"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/form&gt;


If you use the Twig code above, make sure you update the url property of your Ajax request to remove the existing URL.