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.

Najnowsze artykuły

WordUp Trójmiasto #18 - WordPress 20th Anniversary Meetup

WordUp Trójmiasto #18

W dniu 22.4.2023 W Gdyni odbył się WordUp Trójmiasto #18 (WordPress 20th Anniversary Meetup) Kolejne spotkanie twórców, użytkowników i pasjonatów […]


Zobacz więcej
css-mediaqueries-variable

Zmienne css / sass / scss w deklaracjach media query.

Przy pisaniu kodu css mamy możliwość używania zmiennych. Korzystanie z nich jest wygodne: daje mniejszą liczbą powtórzeń, większą elastycznością i […]


Zobacz więcej
Woocommerce-aktualizacja_liczby_produktow_w_koszyku_przy_uzyciu_AJAX

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 […]


Zobacz więcej
migracja_uslug

Migracja usług: strony www, poczta mail, domeny internetowe

W rozmowach z klientami często wraca temat: domen internetowych, certyfikatów ssl, serwerów oraz poczty mail dla potrzeb ich działalności.  Podnoszone […]


Zobacz więcej
Back to top button