My checkout template includes a 'view cart' link as part of the template. This loads the standard (but visually customized) colorbox cart. On my site you can get this by clicking the '1 items' link in the top right (or however many items you added to your cart).

My problem is that if i view my cart from the checkout page and update something in my cart (edit quantities or add a coupon), the order totals shown in my checkout page are not updated. This is obviously a fairly big issue if someone makes a lot of changes or adds a coupon and checks out without double-checking.

How can i make sure that cart edits on my checkout page are reflected in the checkout page when i click 'update cart' in the view cart pop-up?

I'm using the 'multiple flat rate shipping' customization but i do not think that will matter?

So there are two options. Firstly, you can manually update the various checkout values after the cart is closed, and trigger the various functions to cause the different parts of the checkout to update - which you'd achieve with javascript.

The second option would be to essentially force the checkout to reload after the cart has changed in the modal window - which would make all of the checkout update with the new options, although taking this approach if someone has entered their payment details then they will loose what they have typed in.

So option 2 would basically entail preventing the customer from closing the modal window any other way than pressing 'checkout' in the cart. Or alternatively, changing what happens when you close the modal window to refreshing the page instead of just closing the modal.

Option 1 you would need to basically rebuild the cart that is displayed to the customer as a summary of their products - changing quantities, removing product rows entirely, adding in coupons and adjusting totals. There is also a config object in the javascript that you may need to reset some values for, as well as some inputs. After setting them, you'd need to call one or a couple of the update functions like updateShipping and updateTaxes to update everything visually. You're right though - it would be the most fiddly out of the two.

I decided to put a simple 'edit cart' link at the top of my checkout page. When clicked, this launches the normal 'view cart' modal dialog. I did this by adding this bit of JS at the end of the head section in my checkout template.

To make sure that the checkout page refreshes when the cart is changed, i added this bit of JS in my checkout template. I am already using this function for my minicart so some lines that relate only to the minicart have been removed here for readability. Note, that this does indeed refresh the checkout page, this removing any content that had been entered. This is why i elected to put the link at the top of the checkout page.

One option you could take there is actually grabbing all of the customers entered shipping and billing information, and appending it to the checkout link you're redirecting too as prepopulated content. So like "customer_first_name=John&customer_last_name=Smith&..." - obviously you can't do that with the payment information still but you can keep the customer address information.