Answers.Body: <p>The behaviour with ajax responses changed significantly with Craft 4 / Commerce 4 - I have updated my answer to that original question: <a href="https://craftcms.stackexchange.com/questions/17347/update-commerce-cart-using-ajax">Update Commerce Cart using Ajax</a></p>
  <p>...to cover both scenarios.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-31T00:43:47.520Z
Answers.Text: Awesome - thank you!!
Answers.UserDisplayName: DieselHashtag
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-29T23:53:55.933Z
Answers.LastActivityDate: 2023-10-29T23:53:55.933Z
Answers.UserDisplayName: Jeremy Daalder
Answers.Body: <p>Forgive me for perhaps answering a substitute question but it seems to me as though what you really need to know is how to do basic debugging in JavaScript, since it only requires a quick bit of <code>console.log()</code> to see why your conditional check is failing:</p>
  <p>To debug your code, examine the response object by putting <code>console.log(response)</code> in your success function, and then submitting the form with your inspector's console tab open. You'll notice that, in Commerce 4 at least, the response object does not include any such property called <code>success</code>, only <code>cart</code>, <code>message</code>, <code>modelName</code> and <code>redirect</code>:</p>
  <p><a href="https://i.sstatic.net/WfFg7.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WfFg7.png" alt="enter image description here" /></a></p>
  <p>You could check the <code>message</code> property for the exact string &quot;Cart updated.&quot;, but that seems a bit fragile to me (especially if your site could potentially be translated in future). There's a better way - if you force a deliberate error, you'll notice that the error response object contains some useful properties, any of which could be used in a conditional check: <code>error</code>, <code>exception</code> and <code>status</code>. So for example you could check whether <code>response.error</code> is empty. Equally, you could check for the absence of the <code>cart</code> object.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-31T00:43:33.153Z
Answers.Text: Got me on the right track - thank you!
Answers.UserDisplayName: DieselHashtag
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-10-23T13:42:02.840Z
Answers.LastActivityDate: 2023-10-23T13:42:02.840Z
Answers.UserDisplayName: James Smith
Body: <p>Have been trying to get cart updates via ajax.</p>
  <p>I've looked at this answer:
  'https://craftcms.stackexchange.com/questions/17347/update-commerce-cart-using-ajax'</p>
  <p>My cart seem to update ok but I can't seem to get an alert to confirm it which will prevent me from adding post-submission messaging etc.</p>
  <p>My code so far is:</p>
  <p>HTML</p>
  <pre><code>&lt;form method=&quot;POST&quot; id=&quot;addToCartForm&quot;  class=&quot;voucher-purchase needs-validation&quot; novalidate &gt;
          &lt;input type=&quot;hidden&quot; name=&quot;action&quot; value=&quot;commerce/cart/update-cart&quot;&gt;
                                  &lt;input type=&quot;hidden&quot; name=&quot;purchasableId&quot; value=&quot;{{ voucher.purchasableId }}&quot;&gt;
                                  {{ actionInput('commerce/cart/update-cart') }}
                                  {{ csrfInput() }}
  
                                  &lt;input type=&quot;hidden&quot; type=&quot;number&quot; name=&quot;qty&quot; value=&quot;1&quot;&gt;
                                  &lt;div class=&quot;form-group&quot;&gt;
                                      &lt;label&gt;TO:&lt;/label&gt;
                                      &lt;p&gt;Please enter the name of the voucher recipient.&lt;/p&gt;
                                      &lt;input id=&quot;validationCustom01&quot; class=&quot;form-control py-3&quot; type=&quot;text&quot; name=&quot;options[to]&quot; placeholder=&quot;Recipient's Name&quot; required &gt;
                                      &lt;div class=&quot;invalid-feedback&quot;&gt;Please enter recipient name.&lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;form-group&quot;&gt;
                                      &lt;label&gt;FROM:&lt;/label&gt;
                                      &lt;p&gt;Please enter who is gifting the voucher.&lt;/p&gt;
                                      &lt;input class=&quot;form-control py-3&quot;  type=&quot;text&quot; name=&quot;options[from]&quot; placeholder=&quot;Your Name&quot; required &gt; 
                                      &lt;div class=&quot;invalid-feedback&quot;&gt;Please enter your name.&lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;form-group&quot;&gt;
                                      &lt;label&gt;MESSAGE: (Optional):&lt;/label&gt;
                                      &lt;p&gt;Please enter a personalised message to the voucher recipient.&lt;/p&gt;
                                      &lt;textarea class=&quot;form-control py-3&quot; rows=&quot;8&quot; name=&quot;options[message]&quot; placeholder=&quot;Enter your personalised message...&quot;&gt;&lt;/textarea&gt;
                                      &lt;div class=&quot;invalid-feedback&quot;&gt;Please enter a message to include with the voucher.&lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;form-group&quot;&gt;
                                      {% if voucher.customAmount %}
                                      &lt;label&gt;AMOUNT:&lt;/label&gt;
                                      &lt;p&gt;Please nominate the value of the voucher.&lt;/p&gt;
                                      &lt;div class=&quot;amount afterWrap&quot;&gt;
                                          &lt;input class=&quot;voucherValue form-control&quot; required  type=&quot;number&quot; name=&quot;options[amount]&quot; placeholder=&quot;Amount&quot; step=&quot;25&quot;&gt;
                                          &lt;div class=&quot;invalid-feedback&quot;&gt;Please specify a value&lt;/div&gt;
                                      &lt;/div&gt;
                                      {% endif %}
                                  &lt;/div&gt;
                                  &lt;div class=&quot;form-group mt-5&quot;&gt;
                                      &lt;input type=&quot;submit&quot; value=&quot;Add to cart&quot; class=&quot;add-to-cart button btn btn-black&quot;&gt;
                                      &lt;input id=&quot;addToCart&quot; type=&quot;submit&quot; value=&quot;Checkout&quot; class=&quot;button btn btn-black&quot;&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>   $(function() {
  $form = $(&quot;#addToCartForm&quot;);
  // handle submits via ajax
  $form.on('submit', function(e) {
      //Prevent the default submission
      e.preventDefault();
      //Get the form data
      var form_data = $form.serializeArray();
      // ajax it over to the server
      $.ajax({
          type: 'post',
          url: '/',
          data: form_data,
          success: function(response) {
              if (response.success) {
                  alert('Success');
              }
              else {
                  alert('Failure!');
              }
          }
      });        
  });
  </code></pre>
  <p>});</p>
  <p>Has anyone been able to achieve update cart via ajax with something like the above?</p>
  
Tags: <plugin-craftcommerce><ajax><cart>
Title: Update Craft Commerce cart with ajax
ThreadText: # Update Craft Commerce cart with ajax
  
  (Asked by: username_0 on 2023-10-23)
  
  Have been trying to get cart updates via ajax.
  
  I've looked at this answer:
  'https://craftcms.stackexchange.com/questions/17347/update-commerce-cart-using-ajax'
  
  My cart seem to update ok but I can't seem to get an alert to confirm it which will prevent me from adding post-submission messaging etc.
  
  My code so far is:
  
  HTML
  
  ```
  <form method="POST" id="addToCartForm"  class="voucher-purchase needs-validation" novalidate >
          <input type="hidden" name="action" value="commerce/cart/update-cart">
                                  <input type="hidden" name="purchasableId" value="{{ voucher.purchasableId }}">
                                  {{ actionInput('commerce/cart/update-cart') }}
                                  {{ csrfInput() }}
  
                                  <input type="hidden" type="number" name="qty" value="1">
                                  <div class="form-group">
                                      <label>TO:</label>
                                      <p>Please enter the name of the voucher recipient.</p>
                                      <input id="validationCustom01" class="form-control py-3" type="text" name="options[to]" placeholder="Recipient's Name" required >
                                      <div class="invalid-feedback">Please enter recipient name.</div>
                                  </div>
                                  <div class="form-group">
                                      <label>FROM:</label>
                                      <p>Please enter who is gifting the voucher.</p>
                                      <input class="form-control py-3"  type="text" name="options[from]" placeholder="Your Name" required > 
                                      <div class="invalid-feedback">Please enter your name.</div>
                                  </div>
                                  <div class="form-group">
                                      <label>MESSAGE: (Optional):</label>
                                      <p>Please enter a personalised message to the voucher recipient.</p>
                                      <textarea class="form-control py-3" rows="8" name="options[message]" placeholder="Enter your personalised message..."></textarea>
                                      <div class="invalid-feedback">Please enter a message to include with the voucher.</div>
                                  </div>
                                  <div class="form-group">
                                      {% if voucher.customAmount %}
                                      <label>AMOUNT:</label>
                                      <p>Please nominate the value of the voucher.</p>
                                      <div class="amount afterWrap">
                                          <input class="voucherValue form-control" required  type="number" name="options[amount]" placeholder="Amount" step="25">
                                          <div class="invalid-feedback">Please specify a value</div>
                                      </div>
                                      {% endif %}
                                  </div>
                                  <div class="form-group mt-5">
                                      <input type="submit" value="Add to cart" class="add-to-cart button btn btn-black">
                                      <input id="addToCart" type="submit" value="Checkout" class="button btn btn-black">
                                  </div>
                              </form>
  
  ```
  
  JS
  
  ```
     $(function() {
  $form = $("#addToCartForm");
  // handle submits via ajax
  $form.on('submit', function(e) {
      //Prevent the default submission
      e.preventDefault();
      //Get the form data
      var form_data = $form.serializeArray();
      // ajax it over to the server
      $.ajax({
          type: 'post',
          url: '/',
          data: form_data,
          success: function(response) {
              if (response.success) {
                  alert('Success');
              }
              else {
                  alert('Failure!');
              }
          }
      });        
  });
  
  ```
  
  });
  
  Has anyone been able to achieve update cart via ajax with something like the above?
  
  **Tags:** plugin-craftcommerce, ajax, cart
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2023-10-29. Score: 2
  
  The behaviour with ajax responses changed significantly with Craft 4 / Commerce 4 - I have updated my answer to that original question: [Update Commerce Cart using Ajax](https://craftcms.stackexchange.com/questions/17347/update-commerce-cart-using-ajax)
  
  ...to cover both scenarios.
  
  > **Comments:**
  > **username_0**: Awesome - thank you!!  
  
  ---
  
  ### Answer by username_2 on 2023-10-23. Score: 2
  
  Forgive me for perhaps answering a substitute question but it seems to me as though what you really need to know is how to do basic debugging in JavaScript, since it only requires a quick bit of `console.log()` to see why your conditional check is failing:
  
  To debug your code, examine the response object by putting `console.log(response)` in your success function, and then submitting the form with your inspector's console tab open. You'll notice that, in Commerce 4 at least, the response object does not include any such property called `success`, only `cart`, `message`, `modelName` and `redirect`:
  
  [![enter image description here](https://i.sstatic.net/WfFg7.png)](https://i.sstatic.net/WfFg7.png)
  
  You could check the `message` property for the exact string "Cart updated.", but that seems a bit fragile to me (especially if your site could potentially be translated in future). There's a better way - if you force a deliberate error, you'll notice that the error response object contains some useful properties, any of which could be used in a conditional check: `error`, `exception` and `status`. So for example you could check whether `response.error` is empty. Equally, you could check for the absence of the `cart` object.
  
  > **Comments:**
  > **username_0**: Got me on the right track - thank you!  
  
  ---
  
  