Searching for a way to add products to cart and sending the csrf token with ajax

Question

Searching for a way to add products to cart and sending the csrf token with ajax

This is my current code;

$('.add-to-cart-form').on('submit', function(e) {

            e.preventDefault()
            var formData = new FormData($('.add-to-cart-form')[0]);
            formData.append('action', 'commerce/cart/update-cart');

            $.ajax({
                contentType: false,
                processData: false,
                type: 'POST',
                url: '',
                dataType: 'json',
                data: formData,
                success: function(response) {
                    var cartCount = response.cart.totalQty;
                    $('.cart-count').text(cartCount);
                    if (response.success) {
                        console.log('success');
                        console.log(response.success);
                    }
                    else {
                        console.log('error');
                        console.log(response.success);
                    }
                }
            });
        });

Answer 1

So normally in your main layout twig template, you'd have something like this to set some JS variables to hold the current CSRF token:

    {# Super preliminary JS Stuff #}
    <script type="text/javascript">
        window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
        window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";
        window.cartId = "{{ cart.id }}";
    </script>

Then, in your add-to-cart JS, you do something along the lines of this to add those variables to the form data:

   formData.push({
     name: window.csrfTokenName,
     value: window.csrfTokenValue
   })

Craft's own documentation for this is here:

https://craftcms.com/knowledge-base/enabling-csrf-protection#updating-your-javascript