Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-11-27T08:41:27.917Z
Answers.Text: Awesome! Thanks
Answers.UserDisplayName: Bram Beekman
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-11-26T03:30:48.063Z
Answers.LastActivityDate: 2020-11-27T22:54:15.550Z
Answers.LastEditDate: 2020-11-27T22:54:15.550Z
Answers.UserDisplayName: Jeremy Daalder
Body: <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>
  
Tags: <ajax><plugin-craftcommerce3><csrf>
Title: Searching for a way to add products to cart and sending the csrf token with ajax
ThreadText: # 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:
  
  ```js
      {# 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:
  
  ```js
     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  
  
  ---
  
  