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.