The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Checkout page not updating if cart is edited from checkout

babblebibbabblebib Member
in Help edited January 2013
Hi,

I've just discovered a fairly major flaw in my checkout implementation and I'm hoping someone can point me in the right direction.

The site is http://www.babblebib.com/.

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?

Regards
Comments
  • fc_adamfc_adam FoxyCart Team
    @babblebib,

    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.
  • Hi,

    Thanks for the info. It sounds like approach 1 would be the best way but it also looks the most fiddly as i guess you would have to check every product quantity, discount codes and the cart total?

    Approach 2 sounds relatively simple but not a great user experience.

    Can you give me some pointers on how i would get started on either approach?
  • fc_adamfc_adam FoxyCart Team
    @babblebib,

    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.
  • Hi,

    I'm probably going to go with option 2 for now, seems much simpler.

    I think the best approach is to force a page refresh when the modal is closed. This will keep a consistent UI and work if they close the modal, click outside the modal or click 'checkout' button.

    How do I force a page refresh when the modal window is closed?

    Thanks
  • fc_adamfc_adam FoxyCart Team
    @babblebib,

    You'll want to make use of the 'onClosed' callback for colorbox - information on their site here: http://www.jacklmoore.com/colorbox
  • Just reporting back on how i did this in the end.

    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.
    jQuery(document).ready(function () {
        editBasketLinkMarkup = '<div style="padding-top:10px;">'
            +'<a href="https://babblebib.foxycart.com/cart?cart=view">Edit Cart</a>'
            +' (use this to apply discount codes, alter quantities etc.)'
            + '</div>';
        jQuery(editBasketLinkMarkup).insertAfter('#fc_cancel_continue_shopping'); 
    });
    

    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.
    jQuery(document).ready(function () {
        fcc.events.cart.postprocess = new FC.client.event();
        fcc.events.cart.postprocess.add(function (e) {
            jQuery.getJSON(href + '&output=json&callback=?', function (data) {
                fcc.cart_update();
                window.location.href = 'https://babblebib.foxycart.com/cart?cart=checkout';
            });
        });
    });
    

    You can see it all in action at http://www.babblebib.com/.

    Does this all seem about right? It seems to work well.

    Thanks for your help.
  • fc_adamfc_adam FoxyCart Team
    @babblebib,

    Ah - great approach! That should work just fine.

    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.
Sign In or Register to comment.