So implementieren Sie einen WooCommerce AJAX Direct „Jetzt kaufen'-Button

Wenn Sie einen Online-Shop mit WooCommerce betreiben, ist es entscheidend, den Kaufprozess so reibungslos wie möglich zu gestalten. Eine effektive Möglichkeit, dies zu erreichen, besteht darin, eine Schaltfläche „Jetzt kaufen“ hinzuzufügen, die es Kunden ermöglicht, ein Produkt direkt zu kaufen, ohne durch mehrere Seiten navigieren zu müssen. Dieser Blog führt Sie durch die Erstellung einer WooCommerce AJAX-Schaltfläche „Jetzt kaufen“ mithilfe der bereitgestellten Code-Snippets.

Schritt 1: Fügen Sie die Schaltfläche „Jetzt kaufen“ hinzu

Zuerst müssen Sie auf Ihren WooCommerce-Produktseiten eine benutzerdefinierte Schaltfläche „Jetzt kaufen“ hinzufügen. Wir tun dies, indem wir uns in die Aktion woocommerce_after_add_to_cart_button einbinden, die unsere Schaltfläche direkt nach der Standardschaltfläche „In den Warenkorb“ platziert.

Hier ist das PHP-Code-Snippet:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
    $current_product_id = get_the_ID();
    $product = wc_get_product( $current_product_id );

    if( $product->is_type( 'simple' ) ){
        echo '<button data-id="'.$current_product_id.'" class="buy-now button"><i class="matico-icon-toys"></i>'.__('Buy Now', 'woocommerce').'</button>';
    }
}

Erklärung:

• Wir verwenden den Hook „woocommerce_after_add_to_cart_button“, um unseren „Jetzt kaufen“-Button direkt nach dem „In den Warenkorb“-Button einzufügen.
• Die Funktion get_the_ID() ruft die aktuelle Produkt-ID ab und wc_get_product() ruft die Produktdetails ab.
• Wir prüfen, ob das Produkt vom Typ „einfach“ ist und rendern dann die Schaltfläche mit dem entsprechenden Daten-ID-Attribut und einem benutzerdefinierten Symbol.

Schritt 3: Stellen Sie das Skript in die Warteschlange

Als nächstes müssen Sie das Skript in Ihr Theme einreihen, um sicherzustellen, dass es ordnungsgemäß auf Ihren WooCommerce-Seiten geladen wird. So geht's:

wp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery', 'scrollfix-script' ),  $matico_version, true);

wp_localize_script( 'matico-child-script', 'matico_child_script_obj',
    array( 
        'checkout_page_url' => wc_get_checkout_url(),
    )
);

Erklärung:

• wp_enqueue_script() wird verwendet, um unsere benutzerdefinierte Skriptdatei (script.js) zu laden, die den jQuery-Code enthält.
• wp_localize_script() übergibt PHP-Daten an das Skript, beispielsweise die URL der Checkout-Seite, sodass wir sie innerhalb des Skripts verwenden können.

Schritt 2: Behandeln Sie die AJAX-Anfrage

Abschließend verarbeiten wir das Schaltflächenklickereignis mit jQuery. Das jQuery-Skript sendet eine AJAX-Anfrage an WooCommerce, das das Produkt in den Warenkorb legt und den Benutzer dann direkt zur Checkout-Seite weiterleitet.

Hier ist der jQuery-Codeausschnitt:

(function ($) {
    var MaticoChildThemeConfig = {
        init: function () {
            this.bindEvents();
        },
        bindEvents: function () {
            $(document).on('click', '.buy-now', this.handleBuyNowClick);
        },
        handleBuyNowClick: function (event) {
            event.preventDefault();

            var $button = $(this),
                quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,
                productID = $button.data('id');

            var data = {
                product_id: productID,
                quantity: quantity,
            };

            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
                data: data,
                dataType: 'json',
                beforeSend: function () {
                    $button.addClass('loading');
                },
                success: function (res) {
                    if (res.error && res.product_url) {
                        window.location.href = res.product_url;
                    } else {
                        window.location.href = matico_child_script_obj.checkout_page_url;
                    }
                }
            });
        }
    };

    MaticoChildThemeConfig.init();
})(jQuery);

Erklärung:

• Wenn auf die Schaltfläche „Jetzt kaufen“ geklickt wird, verhindern wir die Standardaktion, um ein Neuladen der Seite zu vermeiden.
• Die Produkt-ID und die Menge entnehmen wir der aktuellen Produktseite.
• Eine AJAX-Anfrage wird an den add_to_cart-Endpunkt von WooCommerce gesendet, der das Produkt zum Warenkorb hinzufügt.
• Wenn das Produkt erfolgreich hinzugefügt wurde, leiten wir den Benutzer zur Checkout-Seite weiter. Bei einem Fehler (z. B. wenn das Produkt nicht mehr verfügbar ist) wird der Nutzer auf die Produktseite weitergeleitet.

Abschluss

Durch die Umsetzung der oben genannten Schritte können Sie eine Schaltfläche „Jetzt kaufen“ erstellen, die den Kaufprozess für Ihre Kunden optimiert. Diese Funktion ist besonders nützlich, um die Conversions zu steigern, indem sie die Anzahl der Klicks und Seiten reduziert, die ein Kunde durchsuchen muss, bevor er einen Kauf abschließt.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen WooCommerce AJAX Direct „Jetzt kaufen'-Button. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!