WooCommerce – Gesamtpreis automatisch aktualisieren, wenn sich die Menge geändert hat

Question 1

Ich suche schon seit mehreren Tagen, aber ich habe noch keine Antwort. Grundsätzlich versuche ich, die WooCommerce-Standardschaltfläche “Warenkorb aktualisieren” durch einen Ajax-Aufruf zu ersetzen, der den Gesamtpreis der Bestellung automatisch aktualisiert, wenn sich die Menge ändert. Das ist mein html

<div class="cart_item">
    <div class="product-thumbnail">
        <a href="http://example.com"><img width="90" height="90" src="path%20to%20thumbnail"/></a>
    </div>

    <div class="product-name">
        <a class="cart-page-product__title" href="http://example.com">Product1 name</a>
    </div>

    <div class="product-quantity">
        <div class="quantity">
            <input type="number" step="1"   name="cart[some_security_key][qty]" value="1" class="input-text qty text" size="4"/>
        </div>
    </div>

    <div class="product-subtotal"><span class="amount">2 000</span></div>
        <div class="product-remove">
            <a class="product-remove_link" href="http://example.com/?remove_item">&times;</a>
        </div>
</div>
<div class="cart_item">
    <div class="product-thumbnail">
        <a href="http://example.com"><img width="90" height="90" src="path%20to%20thumbnail"/></a>
    </div>

    <div class="product-name">
        <a class="cart-page-product__title" href="http://example.com">Product2 name</a>
    </div>

    <div class="product-quantity">
        <div class="quantity">
            <input type="number" step="1"   name="cart[some_security_key][qty]" value="1" class="input-text qty text" size="4"/>
        </div>
    </div>

    <div class="product-subtotal"><span class="amount">2 000</span></div>
        <div class="product-remove">
            <a class="product-remove_link" href="http://example.com/?remove_item">&times;</a>
        </div>
</div>

In der functions.php habe ich eine Funktion zum Aktualisieren von Summen:

public function update_total_price() {
        check_ajax_referer( 'update_total_price', 'security' );

        if ( ! defined('WOOCOMMERCE_CART') ) {
            define( 'WOOCOMMERCE_CART', true );
        }

        $cart_updated = false;
            $cart_totals  = isset( $_POST['cart'] ) ? $_POST['cart'] : '';

            if ( sizeof( WC()->cart->get_cart() ) > 0 ) {
                foreach ( WC()->cart->get_cart() as $cart_item_key => $values ) {
                    $_product = $values['data'];

                    // Skip product if no updated quantity was posted
                    if ( ! isset( $_POST['quantity'] ) ) {
                    // if ( ! isset( $cart_totals[ $cart_item_key ]['qty'] ) ) {
                        continue;
                    }

                    // Sanitize
                    $quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9\.]/", '', filter_var($_POST['quantity'], FILTER_SANITIZE_NUMBER_INT)) ), $cart_item_key );
                    // $quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9\.]/", '', $cart_totals[ $cart_item_key ]['qty'] ) ), $cart_item_key );

                    if ( '' === $quantity || $quantity == $values['quantity'] )
                        continue;

                    // Update cart validation
                    $passed_validation  = apply_filters( 'woocommerce_update_cart_validation', true, $cart_item_key, $values, $quantity );

                    // is_sold_individually
                    if ( $_product->is_sold_individually() && $quantity > 1 ) {
                        wc_add_notice( sprintf( __( 'You can only have 1 %s in your cart.', 'woocommerce' ), $_product->get_title() ), 'error' );
                        $passed_validation = false;
                    }

                    if ( $passed_validation ) {
                        WC()->cart->set_quantity( $cart_item_key, $quantity, false );
                    }

                    $cart_updated = true;
                }
            }

            // Trigger action - let 3rd parties update the cart if they need to and update the $cart_updated variable
            $cart_updated = apply_filters( 'woocommerce_update_cart_action_cart_updated', $cart_updated );

            if ( $cart_updated ) {
                // Recalc our totals
                WC()->cart->calculate_totals();
                woocommerce_cart_totals();
                exit;
            }

    }

Und Jquery-Code ist:

jQuery( function( $ ) {

    // wc_cart_params is required to continue, ensure the object exists
    if ( typeof wc_cart_params === 'undefined' ) {
        return false;
    }

    // Cart price update depends on quantity
    //$( document ).on( 'click', '.quantity', function() {


    $( document ).on( 'change', '.quantity, input[type=number]', function() {
        var qty = $( this ).val();
        var currentVal  = parseFloat( qty);

        $( 'div.cart_totals' ).block({ message: null, overlayCSS: { background: '#fff url(' + wc_cart_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6 } });

        var data = {
            action: 'rf_update_total_price',
            security: rf_cart_params.rf_update_total_price_nonce,
            quantity: currentVal
        };

        $.post( rf_cart_params.ajax_url, data, function( response ) {

            $( 'div.cart_totals' ).replaceWith( response );
            $( 'body' ).trigger( 'rf_update_total_price' );

        });
        return false;
    });
});

Der obige Code funktioniert hervorragend, wenn sich nur ein Produkt im Warenkorb befindet.

Aber wenn ich ein anderes Produkt hinzufüge und die Menge eines davon ändere, verwendet meine Funktion den letzten Wert der Menge für alle meine Produkte.

Der Gesamtpreis für das zweite Bild muss beispielsweise 7000 (2000*1+2500*2) betragen, aber er beträgt 9000(2000*2+2500*2). Ich bin neu in Ajax und Jquery und freue mich über jede Hilfe.

Question 2

Das liegt daran, dass Sie Ihren gesamten Warenkorb aktualisieren, nicht nur ein Produkt.

Zuerst müssen Sie den Warenkorb-Hash (es ist kein Sicherheits-Hash, sondern der Produkt-Hash mit allen Produktvariationen) im Javascript-Skript senden:

var item_hash = $( this ).attr( 'name' ).replace(/cart\[([\w]+)\]\[qty\]/g, "$1");
var data = {
        action: 'rf_update_total_price',
        security: rf_cart_params.rf_update_total_price_nonce,
        quantity: currentVal,
        hash : item_hash 
    };

Dann kannst du deine bearbeiten function update_total_priceich habe vereinfacht 😉

function update_total_price() {

    // Skip product if no updated quantity was posted or no hash on WC_Cart
    if( !isset( $_POST['hash'] ) || !isset( $_POST['quantity'] ) ){
        exit;
    }

    $cart_item_key = $_POST['hash'];

    if( !isset( WC()->cart->get_cart()[ $cart_item_key ] ) ){
        exit;
    }

    $values = WC()->cart->get_cart()[ $cart_item_key ];

    $_product = $values['data'];

    // Sanitize
    $quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9\.]/", '', filter_var($_POST['quantity'], FILTER_SANITIZE_NUMBER_INT)) ), $cart_item_key );

    if ( '' === $quantity || $quantity == $values['quantity'] )
        exit;

    // Update cart validation
    $passed_validation  = apply_filters( 'woocommerce_update_cart_validation', true, $cart_item_key, $values, $quantity );

    // is_sold_individually
    if ( $_product->is_sold_individually() && $quantity > 1 ) {
        wc_add_notice( sprintf( __( 'You can only have 1 %s in your cart.', 'woocommerce' ), $_product->get_title() ), 'error' );
        $passed_validation = false;
    }

    if ( $passed_validation ) {
        WC()->cart->set_quantity( $cart_item_key, $quantity, false );
    }

    // Recalc our totals
    WC()->cart->calculate_totals();
    woocommerce_cart_totals();
    exit;
}

Question 3

Hier ist eine einfachere Möglichkeit, dies zu erreichen. Alle Kredite gehen an Reigel Gallarde.

// we are going to hook this on priority 31, so that it would display below add to cart button.
add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;display:none">%s %s</div>',__('Product Total:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
    echo sprintf('<div id="cart_total_price" style="margin-bottom:20px;display:none">%s %s</div>',__('Cart Total:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
    ?>
        <script>
            jQuery(function($){
                var price = <?php echo $product->get_price(); ?>,
                    current_cart_total = <?php echo $woocommerce->cart->cart_contents_total; ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

                $('[name=quantity]').change(function(){
                    if (!(this.value < 1)) {
                        var product_total = parseFloat(price * this.value),
                        cart_total = parseFloat(product_total + current_cart_total);

                        $('#product_total_price .price').html( currency + product_total.toFixed(2));
                        $('#cart_total_price .price').html( currency + cart_total.toFixed(2));
                    }
                    $('#product_total_price,#cart_total_price').toggle(!(this.value <= 1));

                });
            });
        </script>
    <?php
}

Question 4

Seit WooCommerce 2.6.0, veröffentlicht im Juni 2016, verwendet die WooCommerce-Warenkorbseite Ajax, um die Warenkorbsummen zu aktualisieren, nachdem auf die Schaltfläche Warenkorb aktualisieren geklickt wurde. WooCommerce 2.6.0 erfordert WP 4.4 oder neuer.

Sie müssen sich keine Gedanken über das Backend machen und Ihren eigenen Ajax-Aufruf erstellen, der der Schaltfläche „Warenkorb aktualisieren“ zugewiesene kann verwendet werden.

Um diese Funktionalität sofort zu nutzen, können Sie mein kostenloses Plugin verwenden, das auch einige praktische Zusatzoptionen bietet:

Ajax Cart AutoUpdate für WooCommerce

Oder verwenden Sie das untergeordnete Thema, um Folgendes zu tun. Blenden Sie die Schaltfläche „Warenkorb aktualisieren“ aus und stellen Sie dann das Skript in die Warteschlange, das das standardmäßige Ereignis „Warenkorb aktualisieren“ bei der Änderung der Menge der Warenkorbseite auslöst (funktioniert sowohl für das Warenkorb- als auch für das Mini-Warenkorb-Widget). Verwenden Sie den Vorlagenumleitungs-Hook, die Abhängigkeit mit jQuery und stellen Sie sicher, dass dieses Skript nur auf der Warenkorbseite geladen wird.

Um die Schaltfläche mit CSS auszublenden, verwenden Sie die Klasse .button anstelle des Tags, um sie mit allen WooCommerce-Versionen kompatibel zu halten:

.button[name="update_cart"] {
    display: none!important;
}

Oder verbergen Sie die Schaltfläche mit dem PHP-Kopfstil:

add_action('wp_head', 'hide_update_cart_button', 20);
function hide_update_cart_button() {
    echo "<style>.button[name="update_cart"]{ display: none!important;}</style>";
}

Enqueue-Skript in Abhängigkeit von jQuery:

add_action( 'template_redirect', 'auto_update_cart_totals' );
function auto_update_cart_totals() {    
    if (! is_cart() ) return; // Only if it's cart page.
    // Enqueue js file.
    add_action( 'wp_enqueue_scripts', 'my_cart_autoupdate' );           
}

function my_cart_autoupdate( ) {
    // Here goes code to hide CSS button if you decide to use PHP solution for styling.

    wp_enqueue_script( 'my-cart-autoupdate', 'path-to-js-file-its-name-and-extension', array('jquery'), '', true);
}

Die wichtigste und normalerweise übersehene Sache bei jQuery-Code ist die Einstellung der Aktualisierungsverzögerung, in diesem Beispiel 1000, mein Plugin erlaubt es, diesen Wert in den Einstellungen zu ändern. Wenn der Benutzer während dieser Verzögerung die Menge erneut ändert, wird sie auf die volle Dauer zurückgesetzt. Wenn es nicht implementiert ist und Sie die Menge von 1 auf 10 ändern, indem Sie auf die Schaltfläche zum Erhöhen klicken, werden 9 Ajax-Aufrufe anstelle von 1 ausgelöst. Platzieren Sie dies in der .js-Datei:

var timeout;

jQuery('div.woocommerce').on('change keyup mouseup', 'input.qty', function(){ // keyup and mouseup for Firefox support
    if (timeout != undefined) clearTimeout(timeout); //cancel previously scheduled event
    if (jQuery(this).val() == '') return; //qty empty, instead of removing item from cart, do nothing
    timeout = setTimeout(function() {
        jQuery('[name="update_cart"]').trigger('click');
    }, 1000 );
});