<p>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:</p>
<pre class="lang-js prettyprint-override"><code>    {# Super preliminary JS Stuff #}
    &lt;script type=&quot;text/javascript&quot;&gt;
        window.csrfTokenName = &quot;{{ craft.app.config.general.csrfTokenName|e('js') }}&quot;;
        window.csrfTokenValue = &quot;{{ craft.app.request.csrfToken|e('js') }}&quot;;
        window.cartId = &quot;{{ cart.id }}&quot;;
    &lt;/script&gt;
</code></pre>
<p>Then, in your add-to-cart JS, you do something along the lines of this to add those variables to the form data:</p>
<pre class="lang-js prettyprint-override"><code>   formData.push({
     name: window.csrfTokenName,
     value: window.csrfTokenValue
   })
</code></pre>
<p>Craft's own documentation for this is here:</p>
<p><a href="https://craftcms.com/knowledge-base/enabling-csrf-protection#updating-your-javascript" rel="nofollow noreferrer">https://craftcms.com/knowledge-base/enabling-csrf-protection#updating-your-javascript</a></p>

CC BY-SA 4.0
2020-11-27T08:41:27.917Z
Awesome! Thanks
Bram Beekman
CC BY-SA 4.0
2020-11-26T03:30:48.063Z
2020-11-27T22:54:15.550Z
2020-11-27T22:54:15.550Z
Jeremy Daalder
<p>Searching for a way to add products to cart and sending the csrf token  with ajax</p>
<p>This is my current code;</p>
<pre><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);
                    }
                }
            });
        });
</code></pre>

<ajax><plugin-craftcommerce3><csrf>
Searching for a way to add products to cart and sending the csrf token with ajax
# Searching for a way to add products to cart and sending the csrf token with ajax

(Asked by: username_0 on 2020-11-25)

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

**Tags:** ajax, plugin-craftcommerce3, csrf

---

## 1 answers

### Answer by username_1 on 2020-11-26. Score: 2 | Accepted answer

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 #}
    

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

> **Comments:**
> **username_0**: Awesome! Thanks  

---

