1

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);
                    }
                }
            });
        });
2

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.