WooCommerce – aktualizacja liczby produktów w koszyku przy użyciu AJAX

W tym artykule pokaże w jaki sposób tworząc motyw dla WordPress z WooCommerce możemy dodać funkcjonalność pokazywania ilości produktów w koszyku przy użyciu AJAX.

Na początek zastanówmy się jak uzyskać / pobrać informację o liczbie przedmiotów w koszyku WooCommerce. Mam dwie możliwości w zależności od tego co chcemy osiągnać:

WC()->cart->get_cart_contents_count() 
// return 5

Pierwsza pozwala uzyskać liczbę pozycji koszyka wraz z ich ilością. Dla lepszego zobrazowania przykład. Gdy w koszyku mamy 4 żagle (takie same) i jedną deskę widsurfingową to metoda zwróci wartość 5. Metoda to pobiera całą tablicę koszyka, a następnie pobiera parametr (ilość) dla każdego elementu.

count(WC()->cart->get_cart())
// return 2

Druga implementacja zwraca liczbę unikalnych produktów w koszyku, po jednym na produkt. Dla wcześniejszego przykładu, gdy w koszyku mamy 4 żagle (takie same) i jedną deskę widsurfingową to metoda zwróci wartość 2.

Implementacja funkcjonalności w motywie WordPress

Po pierwsze dodajemy do naszego motywu wsparcie dla WooCommerce, poprzez dodanie poniższego kodu w pliku function.php motywy:

function store_focus_add_woocommerce_support() {
	add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'store_focus_add_woocommerce_support' );

Następnie włączamy pokazywanie ilości produktów w koszyku.

Jeśli wejdziemy w ustawienia WooCommerce > Ustawienia > Produkty , należy zaznaczyć checkbox jak na rysunku poniżej:

Gdy jest zaznaczona opcja „Włącz przyciski dodawania do koszyka w technologii AJAX na stronach archiwów” produkty bedą dodawane do koszyka asynchronicznie bez odświeżania strony. Jednak gdy nie ma odświeżania strony to nasuwa się pytanie: jak możemy zaktualizować liczbę pozycji w koszyku?
Dziwne by było, gdyby klient ciągle dodawał produkty do koszyka, ale wciąż wyświetla się komunikat „Koszyk jest pusty” lub brak informacji. WooCommerce daje nam sposób na poradzenie sobie tym problemem dzięki użyciu hook’a: woocommerce_add_to_cart_fragments.

Działa on w następujący sposób – po dodaniu produktu do koszyka poprzez AJAX odświeża wszystkie elementy określone w hooku. Przede wszystkim musimy wyświetlić liczbę elementów koszyka w szablonie motywu. Można to zrobić w wielu miejscach. Należy tylko pamietać o dodaniu unikalnej klasy CSS lub identyfikatora do elementu.

<a href="<?php echo wc_get_cart_url() ?>" class="store-focus-cart">Cart (<?php echo WC()->cart->get_cart_contents_count() ?>)</a>

Następnie użyć następującego kodu w pliku  functions.php motywu. (Oczywiście można to zrobić jako wtyczkę lub w motywie potomnym. W tym przykładzie chodzi tylko o pokazanie zasady działania).

add_filter( 'woocommerce_add_to_cart_fragments', 'store_focus_add_to_cart_fragment' );

function store_focus_add_to_cart_fragment( $fragments ) {
	$fragments[ '.store-focus-cart' ] = '<a href="' . wc_get_cart_url() . '" class="store-focus-cart">Cart (' . WC()->cart->get_cart_contents_count() . ')</a>';
 	return $fragments;
 }

Działa to tak. Dodajemy element tablicy, używając klasy CSS lub identyfikatora jako klucza. Element array zawiera ten sam dynamicznie generowany kod HTML, który wstawiliśmy do szablonu nieco powyżej. Za każdym razem, gdy produkt zostanie dodany do koszyka, WooCommerce pobierze stąd rzeczywisty kod HTML.

Escaping – czy go potrzebujemy ?

WC()->cart->get_cart_contents_count()

Warto mieć na uwadze bezpieczeństwo, w tej metodzie używamy filtr hook’a, więc nie możemy w pełni ufać jej wynikowi i lepiej jest używać jej w poniższy sposób:

absint( WC()->cart->get_cart_contents_count())

Nasz kod po zmodyfikowaniu wyglada następująco:

add_filter( 'woocommerce_add_to_cart_fragments', 'store_focus_add_to_cart_fragment' );

function store_focus_add_to_cart_fragment( $fragments ) {
	$fragments[ '.store-focus-cart' ] = '<a href="' . wc_get_cart_url() . '" class="store-focus-cart">Cart (' .absint(WC()->cart->get_cart_contents_count()) . ')</a>';
 	return $fragments;
 }

Powyższy artykuł jest tylko przykładem pokazującym jak można wprowadzić funkcjonalność: aktualizacji liczby produktów w koszyku przy użyciu AJAX w motywie WordPress wspierającym WooCommerce.

Mam nadzieję że ten artykuł będzie pomocny.

Jeśli masz pytania, potrzebna jest wycena, rozmowa – Zapraszamy do kontaktu z nami.