Wyświetlanie kosztów wysyłki w koszyku WooCommerce bez przeładowania strony
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.
- Upewnij się, że fragment kodu do załadowania niestandardowego skryptu AJAX został dodany do pliku
- 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.
- Upewnij się, że funkcja obsługi AJAX jest zawarta w pliku
- 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.
- Upewnij się, że kod JavaScript został dodany do stopki strony koszyka za pomocą akcji
- 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.
- Upewnij się, że szablon strony koszyka zawiera element z klasą
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.