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

CC BY-SA 4.0
2023-10-31T00:43:47.520Z
Awesome - thank you!!
DieselHashtag
CC BY-SA 4.0
2023-10-29T23:53:55.933Z
2023-10-29T23:53:55.933Z
Jeremy Daalder
<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>

CC BY-SA 4.0
2023-10-31T00:43:33.153Z
Got me on the right track - thank you!
DieselHashtag
CC BY-SA 4.0
2023-10-23T13:42:02.840Z
2023-10-23T13:42:02.840Z
James Smith
<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>

<plugin-craftcommerce><ajax><cart>
Update Craft Commerce cart with ajax
# 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

        
                                
                                {{ actionInput('commerce/cart/update-cart') }}
                                {{ csrfInput() }}

                                
                                
                                    TO:
                                    Please enter the name of the voucher recipient.
                                    
                                    Please enter recipient name.
                                
                                
                                    FROM:
                                    Please enter who is gifting the voucher.
                                     
                                    Please enter your name.
                                
                                
                                    MESSAGE: (Optional):
                                    Please enter a personalised message to the voucher recipient.
                                    
                                    Please enter a message to include with the voucher.
                                
                                
                                    {% if voucher.customAmount %}
                                    AMOUNT:
                                    Please nominate the value of the voucher.
                                    
                                        
                                        Please specify a value
                                    
                                    {% endif %}
                                
                                
                                    
                                    
                                
                            

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!  

---

