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

Jak pokazać koszty wysyłki w koszyku bez przeładowania strony; Wyświetlanie kosztów wysyłki w WooCommerce bez odświeżania; Pokazywanie opłat za wysyłkę w koszyku bez adresu; Koszty wysyłki w WooCommerce za pomocą AJAX; Wyświetlanie kosztów wysyłki w koszyku bez wypełniania adresu; Obliczanie kosztów wysyłki w WooCommerce bez przeładowania strony; Jak pokazać koszty wysyłki w WooCommerce bez odświeżania; Wyświetlanie kosztów wysyłki bez podawania adresu w WooCommerce; Koszty wysyłki na stronie koszyka WooCommerce bez przeładowania; Dynamiczne 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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.

\r\n admin_url('admin-ajax.php'),\r\n 'nonce' => wp_create_nonce('wp_dudecom_ajax_shipping_nonce')\r\n ));\r\n }\r\n}\r\nadd_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_ajax_shipping_script');\r\n\r\n// AJAX handler to calculate shipping cost\r\nfunction wp_dudecom_calculate_shipping_cost() {\r\n check_ajax_referer('wp_dudecom_ajax_shipping_nonce', 'security');\r\n\r\n if (WC()->cart->needs_shipping()) {\r\n WC()->cart->calculate_shipping();\r\n WC()->cart->calculate_totals();\r\n\r\n $packages = WC()->shipping->get_packages();\r\n $shipping_cost = '';\r\n\r\n foreach ($packages as $package) {\r\n if (!empty($package['rates'])) {\r\n foreach ($package['rates'] as $rate) {\r\n $shipping_cost = wc_price($rate->cost);\r\n break;\r\n }\r\n }\r\n }\r\n\r\n wp_send_json_success(array('shipping_cost' => $shipping_cost));\r\n } else {\r\n wp_send_json_error('No shipping needed');\r\n }\r\n}\r\nadd_action('wp_ajax_wp_dudecom_calculate_shipping_cost', 'wp_dudecom_calculate_shipping_cost');\r\nadd_action('wp_ajax_nopriv_wp_dudecom_calculate_shipping_cost', 'wp_dudecom_calculate_shipping_cost');\r\n\r\n// Add custom script to handle AJAX request\r\nadd_action('wp_footer', 'wp_dudecom_add_ajax_shipping_script');\r\nfunction wp_dudecom_add_ajax_shipping_script() {\r\n if (is_cart()) {\r\n ?>", "articleSection": "Koszyk i realizacja zam\u00f3wienia WooCommerce", "datePublished": "2024-12-20T21:30:01+00:00", "dateModified": "2024-12-21T18:53:16+00:00", "author": { "@type": "Person", "name": "WordPress Support" }, "url": "https://www.wp-dude.com/pl/code-snippet/koszty-wysylki-bez-przeladowania-woocommerce/", "wordCount": 673, "speakable": { "@type": "SpeakableSpecification", "cssSelector": ".post__content" }, "dependencies": "WordPress", "proficiencyLevel": "Beginner" }, { "@type": "HowTo", "@id": "https://www.wp-dude.com/pl/code-snippet/koszty-wysylki-bez-przeladowania-woocommerce/#howto", "name": "Wy\u015bwietlanie koszt\u00f3w wysy\u0142ki w koszyku WooCommerce bez prze\u0142adowania strony - How to", "description": "Aby wy\u015bwietli\u0107 koszt wysy\u0142ki w koszyku WooCommerce bez konieczno\u015bci prze\u0142adowania strony, to rozwi\u0105zanie wykorzystuje odrobin\u0119 magii zwanej AJAX. Oto jak to dzia\u0142a:\r\n\r\n\r\n Skrypt niestandardowy: Na stronie koszyka dodawany jest specjalny skrypt. Ten skrypt komunikuje si\u0119 z Twoim serwerem bez od\u015bwie\u017cania strony, prosz\u0105c go o obliczenie kosztu wysy\u0142ki.\r\n Obs\u0142uga AJAX: Gdy skrypt prosi o koszt wysy\u0142ki, serwer sprawdza, czy wysy\u0142ka jest potrzebna. Je\u015bli tak, oblicza koszt i odsy\u0142a go z powrotem do skryptu.\r\n Wy\u015bwietlanie kosztu: Gdy skrypt otrzyma koszt, aktualizuje stron\u0119 koszyka, aby pokaza\u0107 nowy koszt wysy\u0142ki w okre\u015blonym miejscu, oznaczonym elementem .shipping-cost.\r\n Automatyczne aktualizacje: Skrypt uruchamia si\u0119, gdy strona koszyka jest \u0142adowana, i mo\u017ce by\u0107 r\u00f3wnie\u017c wywo\u0142ywany przez inne dzia\u0142ania, takie jak zmiana ilo\u015bci przedmiot\u00f3w w koszyku.\r\n\r\n\r\nUpewnij si\u0119, \u017ce Twoja strona koszyka ma element z klas\u0105 .shipping-cost, w kt\u00f3rym pojawi si\u0119 koszt wysy\u0142ki. Je\u015bli Tw\u00f3j motyw u\u017cywa innej konfiguracji, by\u0107 mo\u017ce b\u0119dziesz musia\u0142 nieco dostosowa\u0107 kod, aby pasowa\u0142.", "step": [ { "@type": "HowToStep", "text": "Aby wdro\u017cy\u0107 funkcj\u0119 wy\u015bwietlania kosztu wysy\u0142ki w koszyku bez prze\u0142adowania strony, wykonaj nast\u0119puj\u0105ce kroki:\r\n\r\nLokalizacja pliku: Dodaj poni\u017cszy kod do pliku functions.php swojego motywu lub do pliku w\u0142asnej wtyczki.\r\n\r\nWymagania wst\u0119pne: Upewnij si\u0119, \u017ce WooCommerce jest zainstalowane i aktywowane na Twojej stronie WordPress.\r\n\r\nKroki wdro\u017cenia:\r\n\r\n\r\n Za\u0142aduj niestandardowy skrypt: \r\n \r\n Upewnij si\u0119, \u017ce fragment kodu do za\u0142adowania niestandardowego skryptu AJAX zosta\u0142 dodany do pliku functions.php.\r\n Ten skrypt b\u0119dzie \u0142adowany tylko na stronie koszyka.\r\n \r\n \r\n Ustawienie obs\u0142ugi AJAX:\r\n \r\n Upewnij si\u0119, \u017ce funkcja obs\u0142ugi AJAX jest zawarta w pliku functions.php.\r\n Funkcja ta oblicza koszt wysy\u0142ki i zwraca go za pomoc\u0105 AJAX.\r\n \r\n \r\n JavaScript do \u017c\u0105dania AJAX:\r\n \r\n Upewnij si\u0119, \u017ce kod JavaScript zosta\u0142 dodany do stopki strony koszyka za pomoc\u0105 akcji wp_footer.\r\n Ten skrypt wysy\u0142a \u017c\u0105danie AJAX w celu obliczenia i zaktualizowania kosztu wysy\u0142ki.\r\n \r\n \r\n Element HTML do wy\u015bwietlania:\r\n \r\n Upewnij si\u0119, \u017ce szablon strony koszyka zawiera element z klas\u0105 .shipping-cost, w kt\u00f3rym b\u0119dzie wy\u015bwietlany koszt wysy\u0142ki.\r\n Je\u015bli Tw\u00f3j motyw u\u017cywa innej struktury, dostosuj odpowiednio selektor JavaScript.\r\n \r\n \r\n\r\n\r\nPo wdro\u017ceniu koszt wysy\u0142ki b\u0119dzie aktualizowany dynamicznie na stronie koszyka bez potrzeby prze\u0142adowania strony. Je\u015bli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej personalizacji, rozwa\u017c skontaktowanie si\u0119 z wp-dude.com w celu uzyskania fachowej pomocy." } ] } ] }