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 cart issues

Hi -
On our checkout page, we provide an option to add an additional donation amount to your order. We provide both a suggested amount (based on the total value of your gifts - eg a round-up your order option) or an other amount that allows the customer to input he/r own amount. I am having some issues:
1. After the user inputs an email address, the additional fields section where the additional donation is located is re-rendered. This is fine, but what is the trigger for this so that I can then call my javascript to re-display the correct auto-generated amount? I am able to do this after the address change, using:

FC.client.on("customer-address-change", setDonation);

But is there one for when the email changes?
FC.client.on("customer-email-update", setDonation); is not working for this.

2. If the user does add an additional donation to their order, the gift of that amount is added to the cart, however for some reason, the custom css is being lost. For example, we hide some of the item details on mobile unless "view gift details" is clicked. This "view gift details" link should be hidden on desktop, and it is on initial load of the checkout, but if the donation is added to the cart, then all the items have their "view gift details" link revealed and it appears that the issue is the css is not being applied, how do I fix this? This also happens when an item is removed from the cart on the checkout page, what do I do to make sure the js and css are called again to fix the display?

Thanks in advance for any suggestions.
Tagged:
Comments
  • fc_adamfc_adam FoxyCart Team
    @jingari,

    Could you whisper me your checkout with steps to replicate? We'll take a look and give you some advice then.
  • fc_adamfc_adam FoxyCart Team
    @jingari,

    Thanks for whispering those details - sorry for the delay in responding.

    For the text disappearing, I was going to recommend setting up your calculation logic within the Twig directly - which would be possible to do, but we would need to whitelist their rounding filter. That way whenever the page is re-rendered, the logic will calculate automatically.

    For now though - you'll just need to alter the events you are hooking into with setDonation(). Specifically, the one you want is render.done, which will run after every render. That means it will run more often than it will actually need to, but it shouldn't cause any issues.

    For the second issue - looks like you've discovered a bug with our javascript rerendering - when FC.cart.render() is called on the checkout, it pulls from the "cart include" template. As you've updated the cart template and embedded it directly in the checkout template - that's why you're seeing that difference.

    While we look into a fix for this issue, add this to the "footer" textarea of the custom header and footer code configuration option for your store:
    {% if context == "checkout" %}<script>
    FC.cart.render = function () {
    FC.Template('checkout').renderBlock('[data-fc-container="cart"]', 'cart');
    };
    </script>{% endif %}
  • Thanks for this - I've fixed everything up as you detailed and it all appears to be working.
  • I did some more testing and it isn't work as expected. The cart on the checkout is no longer functional if I use:
    FC.cart.render = function () {
    FC.Template('checkout').renderBlock('[data-fc-container="cart"]', 'cart');
    };


    If I add an additional donation gift on the checkout page, then I can no longer remove items from the cart and the coupon/promo code no longer works. So once that renderBlock is called, it makes it so the cart as displayed on the checkout doesn't have cart functionality. How can I fix that?
  • fc_adamfc_adam FoxyCart Team
    @jingari,

    Sorry about that, could you try this instead?
    FC.cart.render = function () {
    FC.Template('checkout').renderBlock('#fc-cart', 'cart');
    };
  • Great, this way is working.

    Thanks!
  • fc_adamfc_adam FoxyCart Team
    @jingari,

    Awesome!
Sign In or Register to comment.