Disable checkout button when AJAX is processing

  • Resolved bruceleebee

    (@bennygill)


    7 years, 8 months ago

    I have added a second “proceed to checkout” button to my cart template like this:

    <a href="https://elementpaints.com/checkout/">Proceed to Secure Checkout</a>

    Is there anyway to disable this button (or hide it) while the AJAX is updating?

    I don’t want users to click on the checkout button before the totals have been updated, because it would mean they have the wrong quantity during checkout.

    • This topic was modified 7 years, 8 months ago by bruceleebee.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author moiseh

    (@moiseh)

    Hi

    I guess that you can use the ajaxStart and ajaxStop jquery handlers to intercept when AJAX has processing.

    First, you need to add a class to identifier your link, eg.:
    <a class="secure-checkout-link" href="https://elementpaints.com/checkout/">Proceed to Secure Checkout</a>

    Here the example Javascript/JQuery code to disable link click (not tested):

    
jQuery(document).ready(function($){
    $(document).ajaxStart(function(){
        // remove the href on link
        $('.secure-checkout-link').attr('href_temp', $('.secure-checkout-link').attr('href'));
        $('.secure-checkout-link').removeAttr('href');
    });

    $(document).ajaxStop(function(){
        // back href on link
        $('.secure-checkout-link').attr('href', $('.secure-checkout-link').attr('href_temp'));
    });

});
    Thread Starter bruceleebee

    (@bennygill)

    Thanks so much!

    I ended up just adding the class checkout-button to it so it behaved like the original checkout button which worked great.

    Plugin Author moiseh

    (@moiseh)

    Very great solution ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Disable checkout button when AJAX is processing’ is closed to new replies.