Running Custom Checkout Code for each click of Radio Buttons

ParthianParthian Member
in Help edited June 2014
Hi,

This should be easy. Bit frustrated I can't figure it out.

I've added a Purchase Order but only want it to appear for certain email addresses. Some simple jQuery and logic results in this code for most visitors
$("#fc_payment_method_purchase_order_container").hide();

Works great via document ready. And there is a show() which fires when a valid email is entered.

Trouble comes when the Shipping Address or Paypal radio buttons are clicked (and possibly other features).
Looks like Ajax runs which causes the PO Container to appear. As the page isn't reloaded my onload code doesn't run.

Tried this
FC.checkout.overload ("updateShipping", null, "accountHoldersPO" ); // accountHoldersPO hides/shows the container as appropriate.

Works a treat. But then I clicked pay by Paypal. Back to square one.


Question.
Is there an Ajax on change function?

Tried the following.
jQuery("body").ajaxComplete(function(event, request, settings) {
accountHoldersPO();
});

Also

FC.checkout.overload ("validateAndSubmit", null, "accountHoldersPO" );


Tagged:
Comments
  • Oops submitted too quickly.

    I think I'm looking for something like

    FC.checkout.overload ("WhenSomethingSubstantialChangesontheCheckout", null, "accountHoldersPO" );

    Perhaps there is a longer list of updateShipping type functions that need to be overloaded. But that seems a bit brute force. I'm sure there is a more elegant way.

    Cheers

    Stuart
  • fc_adamfc_adam FoxyCart Team
    @Parthian,

    Could you link us to your checkout? If I'm understanding what you're trying to do, it shouldn't be reappearing on you like that if you click on other options like PayPal.
  • Oh - I'm using the TWIG template. Just in case that is an issue.
  • fc_adamfc_adam FoxyCart Team
    @Parthian,

    Ah, I see what's happening - enabling another payment option is setting all other options to a different display CSS style, so it's clearing your display:none;.

    What you could do instead of setting it to display none in the javascript (or .hide() in your case), is to actually add and remove a specific class to that element - and then have a CSS style for that class that applies a display:none !important; rule to it. That would overrule the existing logic present.
  • Super. Some addClass, removeClass stuff in place of hide/show.

    Removed the overload updateShipping too as it was effectively patching the problem.

    Thanks.
Sign In or Register to comment.