<p>There are two main approaches in general to updating your page in response to changes in the cart.</p>

<p><strong>The first is just an ajax load in of a partial template.</strong>  </p>

<p>This is really just as simple as something like:</p>

<p><code>$cart.load("/_ajax-injects/cart.html").fadeIn('fast');</code></p>

<p>....which (assuming <code>$cart</code> points at a div holding your displayed cart) - would load in over the old cart a new cart (assuming <code>templates/_ajax-injects/cart.html</code> has such a partial template in it)</p>

<p>This is very easy to implement, but does not look wonderfully finessed as there will be a visible result of replacing a large section of the page at one go.</p>

<p><strong>The second approach is using the json <code>response.cart</code> object to update just the appropriate fields within your already displayed cart.</strong></p>

<p>This is considerably trickier.  Each of the fields, such as your item quantities, subtotals, tax, shipping etc must have an identifying class or id on them, and then you parse through the <code>response.cart</code> object grabbing the appropriate values from that and inserting them into those fields.  You also need to deal with e.g. removing <code>lineItem</code> rows if the <code>qty</code> is zero and so forth.</p>

<p>A lot more work, however once implemented this is a visually much more finessed approach as just the fields that need updating get updated.</p>

CC BY-SA 3.0
2017-04-05T13:50:48.033Z
Wow, the ajax is stupid simple. My problem was I was assuming I wouldn't be able to access the _includes since they're above the webroot. Thanks for the help!
Joel
CC BY-SA 4.0
2018-05-19T19:46:00.123Z
I am getting 404 when trying to load the template. Do I need to reconfigure `.htaccess` or anything like that to make load work? The path to the template seems correct.
krizajb
CC BY-SA 4.0
2018-05-19T22:50:58.240Z
I wasn't able to load files in folders with a `_` prefix.
krizajb
CC BY-SA 3.0
2017-04-05T01:07:36.107Z
2017-04-05T01:07:36.107Z
Jeremy Daalder
<p>I'm working on getting our site set up with Craft Commerce, and I am currently working on a sidebar cart for the site. I've found examples on how to add products to the cart using AJAX and jQuery and have gotten that working successfully. However, I'm struggling to understand how to update the cart listing after a successful response.</p>

<p>I have the sidebar cart template set up as an include. Is it possible to use AJAX and jQuery to reload just the sidebar cart include after the successful response? Or is there a better way to show the updated contents?</p>

<templating><plugin-craftcommerce><ajax>
AJAX reload include template
# AJAX reload include template

(Asked by: username_0 on 2017-04-04)

I'm working on getting our site set up with Craft Commerce, and I am currently working on a sidebar cart for the site. I've found examples on how to add products to the cart using AJAX and jQuery and have gotten that working successfully. However, I'm struggling to understand how to update the cart listing after a successful response.

I have the sidebar cart template set up as an include. Is it possible to use AJAX and jQuery to reload just the sidebar cart include after the successful response? Or is there a better way to show the updated contents?

**Tags:** templating, plugin-craftcommerce, ajax

---

## 1 answers

### Answer by username_1 on 2017-04-05. Score: 2 | Accepted answer

There are two main approaches in general to updating your page in response to changes in the cart.

**The first is just an ajax load in of a partial template.**

This is really just as simple as something like:

`$cart.load("/_ajax-injects/cart.html").fadeIn('fast');`

....which (assuming `$cart` points at a div holding your displayed cart) - would load in over the old cart a new cart (assuming `templates/_ajax-injects/cart.html` has such a partial template in it)

This is very easy to implement, but does not look wonderfully finessed as there will be a visible result of replacing a large section of the page at one go.

**The second approach is using the json `response.cart` object to update just the appropriate fields within your already displayed cart.**

This is considerably trickier. Each of the fields, such as your item quantities, subtotals, tax, shipping etc must have an identifying class or id on them, and then you parse through the `response.cart` object grabbing the appropriate values from that and inserting them into those fields. You also need to deal with e.g. removing `lineItem` rows if the `qty` is zero and so forth.

A lot more work, however once implemented this is a visually much more finessed approach as just the fields that need updating get updated.

> **Comments:**
> **username_0**: Wow, the ajax is stupid simple. My problem was I was assuming I wouldn't be able to access the _includes since they're above the webroot. Thanks for the help!  
> **username_2**: I am getting 404 when trying to load the template. Do I need to reconfigure `.htaccess` or anything like that to make load work? The path to the template seems correct.  
> **username_2**: I wasn't able to load files in folders with a `_` prefix.  

---

