<p>There are two major approaches.</p>

<ol>
<li><p>The easier approach is to create a partial template that displays the cart lineItems, and simply ajax <code>load</code> that template in to a div that is your cart display after you've done the lineItem update.  However, this has the disadvantage of making the whole cart section update in a visible way, which look a lot less finessed than the second approach.</p></li>
<li><p>In  short, you'll need to use the cart object in the json response to re-draw just the appropriate parts of your cart display.</p></li>
</ol>

<p>Here's an example of approach 2, (don't focus on the specifics below which are from a live site - but rather this should be enough to give you the idea) - if the user e.g. adjusts line item quantities, we grab the appropriate parts of <code>response.cart</code> and then do some local calculations and update the appropriate parts of the page:</p>

<pre><code>            $.post('/actions/' + $('input[name=action]').val(), form.serialize(), function(response) {

            // Change in qty successful
            if (response.success) {
                if (response.cart.lineItems[id]) {
                    var subtotalNew = parseFloat(response.cart.lineItems[id].price * response.cart.lineItems[id].qty);
                    utilities.replacePrice($subtotal, subtotalNew);
                }

                navCart.update(response.cart);
                cart.update(response.cart, true);
            }
</code></pre>

<p>...where, for example, <code>utilities.replacePrice</code> is:</p>

<pre><code>replacePrice: function($obj, price, discount) {
    var text = module.exports.currency(price);

    // Handle discounts
    if (discount) {
        // Supplied as negative number - because we want it formatted differently, we make it positive
        var discountPrice = module.exports.currency(price * -1);
        text = '- (' + discountPrice + ')';
    }

    $obj.fadeOut("fast", function(){
        $obj.text( text );
        $obj.fadeIn("fast");
    });
},
</code></pre>

<p>...and the <code>cart.update</code> functions are similar and take care of updating the nav bar cart and the totals and shipping sections.</p>

<p>I will warn you that implementing in full a completley ajax updating cart page is a fair bit of work and complexity to get right, and the actual implementation will depend greatly on your checkout flow, which you should have thoroughly worked out BEFORE you implement this, or you can quickly tie yourself in JS knots.</p>

<p>If you want to see a fairly completely ajaxed Commerce cart in action, add this to your cart and then visit your cart and muck about changing quantities and removing things etc:
<a href="https://imagescience.com.au/products/inkjet-print-retouching-kit" rel="nofollow noreferrer">https://imagescience.com.au/products/inkjet-print-retouching-kit</a></p>

CC BY-SA 3.0
2017-03-30T13:17:05.400Z
I see, so I just take all the attributes that I need from the lineItem like the images and description and then when the user updates the quantity I'll update the cart from the response.cart, that makes sense.
Thanks a lot Jeremy
pinksorceress23
CC BY-SA 3.0
2017-03-30T00:02:13.300Z
2017-03-30T00:02:13.300Z
Jeremy Daalder
<p>How do I update the lineItems after I submit the form through ajax? right now it adds the item, but it doesn't show up in the cart, it only shows up when I reload the page. </p>

<p>I am adding an item to the cart through ajax with this code:</p>

<pre><code>$('.form-products').on('submit', function(e) {

    e.preventDefault();

    var data = $(this).serialize();

    $.ajax({
        type: 'POST',
        data: data,
        url: '/',
        success: function(response) {
            var cartCount = '(' + response.cart.totalQty + ')';
            $('.cart-count').text(cartCount);

            $('#cart').removeClass('close');
        },
        error: function(response) {
            console.log(response);
        }
    });

});
</code></pre>

<p>Then under the  <code>div#cart</code> I have this code:</p>

<pre><code>{% for item in cart.lineItems %}
   &lt;li&gt;
     cart information goes here
     this shows the product images, price and other info.
   &lt;/li&gt;
{% endfor %}
</code></pre>

<plugin-craftcommerce><ajax>
Update cart lineItems through ajax
# Update cart lineItems through ajax

(Asked by: username_0 on 2017-03-29)

How do I update the lineItems after I submit the form through ajax? right now it adds the item, but it doesn't show up in the cart, it only shows up when I reload the page. 
I am adding an item to the cart through ajax with this code:
$('.form-products').on('submit', function(e) {

    e.preventDefault();

    var data = $(this).serialize();

    $.ajax({
        type: 'POST',
        data: data,
        url: '/',
        success: function(response) {
            var cartCount = '(' + response.cart.totalQty + ')';
            $('.cart-count').text(cartCount);

            $('#cart').removeClass('close');
        },
        error: function(response) {
            console.log(response);
        }
    });

});

Then under the  div#cart I have this code:
{% for item in cart.lineItems %}
   
     cart information goes here
     this shows the product images, price and other info.
   
{% endfor %}

**Tags:** plugin-craftcommerce, ajax


---

## 1 answers

### Answer by username_1 on 2017-03-30. Score: 4 | Accepted answer

There are two major approaches.

The easier approach is to create a partial template that displays the cart lineItems, and simply ajax load that template in to a div that is your cart display after you've done the lineItem update.  However, this has the disadvantage of making the whole cart section update in a visible way, which look a lot less finessed than the second approach.
In  short, you'll need to use the cart object in the json response to re-draw just the appropriate parts of your cart display.

Here's an example of approach 2, (don't focus on the specifics below which are from a live site - but rather this should be enough to give you the idea) - if the user e.g. adjusts line item quantities, we grab the appropriate parts of response.cart and then do some local calculations and update the appropriate parts of the page:
            $.post('/actions/' + $('input[name=action]').val(), form.serialize(), function(response) {

            // Change in qty successful
            if (response.success) {
                if (response.cart.lineItems[id]) {
                    var subtotalNew = parseFloat(response.cart.lineItems[id].price * response.cart.lineItems[id].qty);
                    utilities.replacePrice($subtotal, subtotalNew);
                }

                navCart.update(response.cart);
                cart.update(response.cart, true);
            }

...where, for example, utilities.replacePrice is:
replacePrice: function($obj, price, discount) {
    var text = module.exports.currency(price);

    // Handle discounts
    if (discount) {
        // Supplied as negative number - because we want it formatted differently, we make it positive
        var discountPrice = module.exports.currency(price * -1);
        text = '- (' + discountPrice + ')';
    }

    $obj.fadeOut("fast", function(){
        $obj.text( text );
        $obj.fadeIn("fast");
    });
},

...and the cart.update functions are similar and take care of updating the nav bar cart and the totals and shipping sections.
I will warn you that implementing in full a completley ajax updating cart page is a fair bit of work and complexity to get right, and the actual implementation will depend greatly on your checkout flow, which you should have thoroughly worked out BEFORE you implement this, or you can quickly tie yourself in JS knots.
If you want to see a fairly completely ajaxed Commerce cart in action, add this to your cart and then visit your cart and muck about changing quantities and removing things etc:
https://imagescience.com.au/products/inkjet-print-retouching-kit

> **Comments:**
> **username_0**: I see, so I just take all the attributes that I need from the lineItem like the images and description and then when the user updates the quantity I'll update the cart from the response.cart, that makes sense. Thanks a lot Jeremy  

---

