Starten und Stoppen des Ajax-Overlay-Spinners in Woocommerce

Lesezeit: 1 Minute

Benutzer-Avatar
Mike

Ich habe ein benutzerdefiniertes Zahlungsgateway entwickelt, das den Zahlungsprozess über Ajax verzögert. Ich möchte den gleichen Spinner zeigen, der derzeit im WooCommerce verwendet wird.

Das ist ein Auszug aus meinem jQuery-Code:

function callAjax(){
    jQuery.ajax({
        type : "POST",
        url: '<?php echo site_url().'/?wc-api=custom_ function'; ?>',
        data: response,
        //data: {action:'gateway'},
        dataType : "json",
        cache: false,
        success: function(response) {                               
            //alert("Your vote could not be added");
            //alert(response);
            flag = true;
            // window.location = response.redirect;
            //console.log(response);
            return false;
        }
    }); 
}

setTimeout(
    function(){ callAjax(); 
}, 3000);

Also ich möchte das machen:

Bitte überprüfen Sie mit dem Bild

Wie starte und stoppe ich auf der Checkout-Seite die Ajax-Woocommerce-Overlay-Spinner?

  • wie man den Overlay-Spinner aufruft

    – Mike

    5. Februar 2019 um 15:34 Uhr

Benutzer-Avatar
LoicTheAztec

Woocommerce verwendet jQuery-BlockUI-Plugin um bei einigen jQuery-Ereignissen und auf bestimmten Seiten eine blockierende Überlagerung mit einem animierten Spinner zu erstellen.

Hier unten ist ein Beispiel auf der Checkout-Seite, das Woocommerce-Spinner nach einer Verzögerung von 2 Sekunden nach dem Laden der Seite aktiviert und sie nach 3 Sekunden stoppt:

add_action('wp_footer', 'spinners_example_on_checkout_jquery_script');
function spinners_example_on_checkout_jquery_script() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        // Targeting checkout checkout payment and Review order table like Woocommerce does.
        var a=".woocommerce-checkout-payment, .woocommerce-checkout-review-order-table";

        // Starting spinners with a delay of 2 seconds
        setTimeout(function() {
            // Starting spinners
            $(a).block({
                message: null,
                overlayCSS: {
                    background: "#fff",
                    opacity: .6
                }
            });

            console.log('start');

            // Stop spinners after 3 seconds
            setTimeout(function() {
                // Stop spinners
                $(a).unblock();

                console.log('stop');
            }, 5000);
        }, 2000);
    });
    </script>
    <?php
    endif;
}

Der Code wird in die function.php-Datei Ihres aktiven untergeordneten Designs (oder aktiven Designs) eingefügt. Getestet und funktioniert.

Das jQuery-BlockUI-Plugin amtliche Dokumentation.

  • Ich habe es in meinem Plugin versucht, es funktioniert gut. vielen Dank für Ihren leicht modifizierten Code

    – Mike

    6. Februar 2019 um 13:20 Uhr

1355580cookie-checkStarten und Stoppen des Ajax-Overlay-Spinners in Woocommerce

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy