Automatyczna aktualizacja koszyka WooCommerce przy zmianie ilości

How to automatically update the cart after changing the quantity in WooCommerceWooCommerce automatically updates the cart after changing the quantityPlugin for automatic cart update after changing the quantityAutomatic cart update after changing the quantity in WooCommerceUpdate WooCommerce cart automatically after changing the quantityAutomatic quantity update in WooCommerce cartWooCommerce cart update without clicking a buttonEnable automatic cart update after changing the quantityWooCommerce AJAX cart update after changing the quantityHow to make the WooCommerce cart update automatically

Objaśnienie

Oto jak możesz sprawić, aby koszyk WooCommerce aktualizował się automatycznie, gdy zmieniasz ilość produktu, bez potrzeby klikania przycisku aktualizacji.

Co to robi:

Kiedy jesteś na stronie koszyka i zmieniasz ilość produktu, koszyk automatycznie się aktualizuje.
To osiągane jest za pomocą odrobiny magii JavaScript (AJAX), która komunikuje się z Twoim serwerem w tle.

Jak to działa:

Na stronie koszyka ładowany jest niestandardowy skrypt. Skrypt ten nasłuchuje wszelkich zmian w polach wejściowych ilości.
Gdy wykryta zostanie zmiana, wysyła nową ilość do serwera za pomocą AJAX.
Serwer aktualizuje koszyk z nową ilością i przelicza sumy.
Na koniec zaktualizowane szczegóły koszyka są wysyłane z powrotem na stronę, odświeżając wyświetlanie koszyka bez potrzeby pełnego przeładowania strony.

Kluczowe elementy:

Kod PHP: Ta część ustawia obsługę po stronie serwera. Nasłuchuje żądań AJAX i aktualizuje koszyk odpowiednio.
Kod JavaScript: Ta część działa w Twojej przeglądarce. Wykrywa zmiany w polach ilości i wysyła niezbędne dane do serwera.

Dzięki temu rozwiązaniu Twoi klienci będą cieszyć się płynniejszym doświadczeniem zakupowym, ponieważ nie będą musieli ręcznie aktualizować koszyka za każdym razem, gdy dostosują ilości.

Kod
<?php
/**
 * Automatically update WooCommerce cart when quantity changes.
 *
 * This snippet uses AJAX to update the cart totals without requiring a button click.
 * It hooks into the WooCommerce scripts and adds custom JavaScript to handle the AJAX request.
 */

// Enqueue custom script to handle AJAX cart update
function wp_dudecom_enqueue_ajax_cart_update_script() {
    if (is_cart()) {
        wp_enqueue_script('wp-dudecom-ajax-cart-update', get_template_directory_uri() . '/js/wp-dudecom-ajax-cart-update.js', array('jquery'), null, true);
        wp_localize_script('wp-dudecom-ajax-cart-update', 'wp_dudecom_ajax_cart', array(
            'ajax_url' => admin_url('admin-ajax.php'),
        ));
    }
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_ajax_cart_update_script');

// Handle AJAX request to update cart
function wp_dudecom_ajax_update_cart() {
    WC()->cart->set_quantity($_POST['cart_item_key'], $_POST['quantity']);
    WC()->cart->calculate_totals();
    WC()->cart->maybe_set_cart_cookies();

    // Send updated cart fragments back to the front-end
    WC_AJAX::get_refreshed_fragments();
    wp_die();
}
add_action('wp_ajax_wp_dudecom_update_cart', 'wp_dudecom_ajax_update_cart');
add_action('wp_ajax_nopriv_wp_dudecom_update_cart', 'wp_dudecom_ajax_update_cart');

?>

// JavaScript file: wp-dudecom-ajax-cart-update.js
jQuery(function($) {
    $('body').on('change', '.woocommerce-cart-form input.qty', function() {
        var $this = $(this);
        var cart_item_key = $this.closest('tr').attr('data-cart_item_key');
        var quantity = $this.val();

        $.ajax({
            type: 'POST',
            url: wp_dudecom_ajax_cart.ajax_url,
            data: {
                action: 'wp_dudecom_update_cart',
                cart_item_key: cart_item_key,
                quantity: quantity
            },
            success: function(response) {
                // Update cart fragments
                if (response && response.fragments) {
                    $.each(response.fragments, function(key, value) {
                        $(key).replaceWith(value);
                    });
                }
            }
        });
    });
});

Instrukcja

Lokalizacja pliku: Dodaj kod PHP do pliku functions.php swojego motywu lub do pliku własnej wtyczki. Kod JavaScript powinien być umieszczony w nowym pliku o nazwie wp-dudecom-ajax-cart-update.js w katalogu js w Twoim motywie.

Wymagania wstępne:

Upewnij się, że WooCommerce jest zainstalowane i aktywowane na Twojej stronie WordPress.

Kroki wdrożenia:

Dodaj kod PHP: Otwórz plik functions.php swojego motywu lub plik własnej wtyczki i wklej podany kod PHP. Ten kod dodaje plik JavaScript i obsługuje żądanie AJAX do aktualizacji koszyka.
Utwórz plik JavaScript: W katalogu swojego motywu utwórz folder o nazwie js, jeśli jeszcze nie istnieje. Wewnątrz tego folderu utwórz nowy plik o nazwie wp-dudecom-ajax-cart-update.js i wklej podany kod JavaScript do tego pliku.
Zweryfikuj ścieżki plików: Upewnij się, że ścieżka w funkcji wp_enqueue_script odpowiada lokalizacji Twojego pliku JavaScript. Powinna ona wyglądać następująco: get_template_directory_uri() . '/js/wp-dudecom-ajax-cart-update.js'.
Przetestuj funkcjonalność: Przejdź do strony koszyka WooCommerce i zmień ilość produktu. Koszyk powinien automatycznie zaktualizować się bez potrzeby klikania przycisku aktualizacji.

W celu uzyskania dalszej pomocy lub w celu odkrycia bardziej zaawansowanych funkcji, rozważ skontaktowanie się z wp-dude.com w celu uzyskania profesjonalnego wsparcia WordPress.