Wyświetlanie kosztów wysyłki w koszyku WooCommerce bez przeładowania strony

Jak pokazać koszty wysyłki w koszyku bez przeładowania stronyWyświetlanie kosztów wysyłki w WooCommerce bez odświeżaniaPokazywanie opłat za wysyłkę w koszyku bez adresuKoszty wysyłki w WooCommerce za pomocą AJAXWyświetlanie kosztów wysyłki w koszyku bez wypełniania adresuObliczanie kosztów wysyłki w WooCommerce bez przeładowania stronyJak pokazać koszty wysyłki w WooCommerce bez odświeżaniaWyświetlanie kosztów wysyłki bez podawania adresu w WooCommerceKoszty wysyłki na stronie koszyka WooCommerce bez przeładowaniaDynamiczne koszty wysyłki w WooCommerce koszyku

Objaśnienie

Aby wyświetlić koszt wysyłki w koszyku WooCommerce bez konieczności przeładowania strony, to rozwiązanie wykorzystuje odrobinę magii zwanej AJAX. Oto jak to działa:

Skrypt niestandardowy: Na stronie koszyka dodawany jest specjalny skrypt. Ten skrypt komunikuje się z Twoim serwerem bez odświeżania strony, prosząc go o obliczenie kosztu wysyłki.
Obsługa AJAX: Gdy skrypt prosi o koszt wysyłki, serwer sprawdza, czy wysyłka jest potrzebna. Jeśli tak, oblicza koszt i odsyła go z powrotem do skryptu.
Wyświetlanie kosztu: Gdy skrypt otrzyma koszt, aktualizuje stronę koszyka, aby pokazać nowy koszt wysyłki w określonym miejscu, oznaczonym elementem .shipping-cost.
Automatyczne aktualizacje: Skrypt uruchamia się, gdy strona koszyka jest ładowana, i może być również wywoływany przez inne działania, takie jak zmiana ilości przedmiotów w koszyku.

Upewnij się, że Twoja strona koszyka ma element z klasą .shipping-cost, w którym pojawi się koszt wysyłki. Jeśli Twój motyw używa innej konfiguracji, być może będziesz musiał nieco dostosować kod, aby pasował.

Kod
```php
// Enqueue custom script for AJAX shipping cost update
function wp_dudecom_enqueue_ajax_shipping_script() {
    if (is_cart()) {
        wp_enqueue_script('wp-dudecom-ajax-shipping', get_template_directory_uri() . '/js/wp-dudecom-ajax-shipping.js', array('jquery'), null, true);
        wp_localize_script('wp-dudecom-ajax-shipping', 'wp_dudecom_ajax_shipping_params', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('wp_dudecom_ajax_shipping_nonce')
        ));
    }
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_ajax_shipping_script');

// AJAX handler to calculate shipping cost
function wp_dudecom_calculate_shipping_cost() {
    check_ajax_referer('wp_dudecom_ajax_shipping_nonce', 'security');

    if (WC()->cart->needs_shipping()) {
        WC()->cart->calculate_shipping();
        WC()->cart->calculate_totals();

        $packages = WC()->shipping->get_packages();
        $shipping_cost = '';

        foreach ($packages as $package) {
            if (!empty($package['rates'])) {
                foreach ($package['rates'] as $rate) {
                    $shipping_cost = wc_price($rate->cost);
                    break;
                }
            }
        }

        wp_send_json_success(array('shipping_cost' => $shipping_cost));
    } else {
        wp_send_json_error('No shipping needed');
    }
}
add_action('wp_ajax_wp_dudecom_calculate_shipping_cost', 'wp_dudecom_calculate_shipping_cost');
add_action('wp_ajax_nopriv_wp_dudecom_calculate_shipping_cost', 'wp_dudecom_calculate_shipping_cost');

// Add custom script to handle AJAX request
add_action('wp_footer', 'wp_dudecom_add_ajax_shipping_script');
function wp_dudecom_add_ajax_shipping_script() {
    if (is_cart()) {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                function updateShippingCost() {
                    $.ajax({
                        url: wp_dudecom_ajax_shipping_params.ajax_url,
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            action: 'wp_dudecom_calculate_shipping_cost',
                            security: wp_dudecom_ajax_shipping_params.nonce
                        },
                        success: function(response) {
                            if (response.success) {
                                $('.shipping-cost').text(response.data.shipping_cost);
                            } else {
                                console.log(response.data);
                            }
                        }
                    });
                }

                // Trigger shipping cost update on cart page load
                updateShippingCost();

                // Optionally, trigger on other events like quantity change
                $(document.body).on('updated_cart_totals', function() {
                    updateShippingCost();
                });
            });
        </script>
        <?php
    }
}
```

Note: This code assumes you have a `.shipping-cost` element in your cart template where the shipping cost will be displayed. Adjust the selector as needed to match your theme's HTML structure.

Instrukcja

Aby wdrożyć funkcję wyświetlania kosztu wysyłki w koszyku bez przeładowania strony, wykonaj następujące kroki:

Lokalizacja pliku: Dodaj poniższy kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

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

Kroki wdrożenia:

Załaduj niestandardowy skrypt:
- Upewnij się, że fragment kodu do załadowania niestandardowego skryptu AJAX został dodany do pliku functions.php.
- Ten skrypt będzie ładowany tylko na stronie koszyka.
Ustawienie obsługi AJAX:
- Upewnij się, że funkcja obsługi AJAX jest zawarta w pliku functions.php.
- Funkcja ta oblicza koszt wysyłki i zwraca go za pomocą AJAX.
JavaScript do żądania AJAX:
- Upewnij się, że kod JavaScript został dodany do stopki strony koszyka za pomocą akcji wp_footer.
- Ten skrypt wysyła żądanie AJAX w celu obliczenia i zaktualizowania kosztu wysyłki.
Element HTML do wyświetlania:
- Upewnij się, że szablon strony koszyka zawiera element z klasą .shipping-cost, w którym będzie wyświetlany koszt wysyłki.
- Jeśli Twój motyw używa innej struktury, dostosuj odpowiednio selektor JavaScript.

Po wdrożeniu koszt wysyłki będzie aktualizowany dynamicznie na stronie koszyka bez potrzeby przeładowania strony. Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej personalizacji, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.

\n admin_url('admin-ajax.php'),\n 'nonce' => wp_create_nonce('wp_dudecom_ajax_shipping_nonce')\n ));\n }\n}\nadd_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_ajax_shipping_script');\n\n// AJAX handler to calculate shipping cost\nfunction wp_dudecom_calculate_shipping_cost() {\n check_ajax_referer('wp_dudecom_ajax_shipping_nonce', 'security');\n\n if (WC()->cart->needs_shipping()) {\n WC()->cart->calculate_shipping();\n WC()->cart->calculate_totals();\n\n $packages = WC()->shipping->get_packages();\n $shipping_cost = '';\n\n foreach ($packages as $package) {\n if (!empty($package['rates'])) {\n foreach ($package['rates'] as $rate) {\n $shipping_cost = wc_price($rate->cost);\n break;\n }\n }\n }\n\n wp_send_json_success(array('shipping_cost' => $shipping_cost));\n } else {\n wp_send_json_error('No shipping needed');\n }\n}\nadd_action('wp_ajax_wp_dudecom_calculate_shipping_cost', 'wp_dudecom_calculate_shipping_cost');\nadd_action('wp_ajax_nopriv_wp_dudecom_calculate_shipping_cost', 'wp_dudecom_calculate_shipping_cost');\n\n// Add custom script to handle AJAX request\nadd_action('wp_footer', 'wp_dudecom_add_ajax_shipping_script');\nfunction wp_dudecom_add_ajax_shipping_script() {\n if (is_cart()) {\n ?>\n \n