Tworzenie dynamicznie odświeżanych informacji o koszyku WooCommerce

WooCommerce znacząco upraszcza proces pobierania aktualnych informacji o stanie koszyka z użyciem zapytań AJAX-owych. Dzięki filtrowi woocommerce_header_add_to_cart_fragment możemy stworzyć dynamicznie odświeżane fragmenty strony, bez konieczności pisania linijki kodu JavaScript.

Jak to działa?

Rozwiązanie naszego problemu jest bardzo proste:

1) Tworzymy element w kodzie motywu, który będzie odświeżany przy każdym kliknięciu przycisku “Dodaj do koszyka”,

2) W filtrze woocommerce_header_add_to_cart_fragment tworzymy kod, który generuje zawartość odświeżanego elementu w taki sam sposób w jaki jest generowany element w motywie,

3) W tej samej funkcji modyfikujemy tablicę $fragments, gdzie klucz to selektor naszego elementu.

Dzięki powyższemu rozwiązaniu korzystamy z mechanizmu, który przy każdym kliknięciu przycisku “Dodaj do koszyka” odświeża zawartość wszystkich elementów zdefiniowanych w tablicy $fragments.

Takie podejście pozwala nam ominąć etap pisania kodu JavaScript, gdyż wszystko co jest nam potrzebne zostało już wcześniej napisane przez autorów wtyczki WooCommerce.

Kod dla motywu

W wybranym miejscu naszego motywu umieszczamy element, który będzie służył za element wyświetlający informacje z koszyka:

<span class="theme-slug-cart-info">
    <?php 
        echo sprintf(
            _n( 
                'Masz  w koszyku %d produkt (%s)', 'Masz w koszyku %d produktów (%s)', 
                WC()->cart->cart_contents_count,
                'slug_theme'
            ), 
            WC()->cart->cart_contents_count, 
            WC()->cart->get_cart_total()
        ); 
    ?>
</span>

Kod filtra

W pliku functions.php naszego motywu musimy dodać następujący fragment:

if(!function_exists('theme_slug_dynamic_fragment')) :
    function theme_slug_dynamic_fragment($fragments) {
        $output = '';
        $output .= '<span class="cart-info">';
        $output .= sprintf(
            _n( 
                'Masz  w koszyku %d produkt (%s)', 'Masz w koszyku %d produktów (%s)', 
                WC()->cart->cart_contents_count,
                'slug_theme'
            ), 
            WC()->cart->cart_contents_count, 
            WC()->cart->get_cart_total()
        ); 
        $output .= '</span>';

        $fragments['.theme-slug-cart-info'] = $output;

        return $fragments;
    }

    add_filter('woocommerce_add_to_cart_fragments', 'theme_slug_dynamic_fragment');
endif;

Funkcja obsługująca filtr woocommerce_add_to_cart_fragments jako argument przyjmuje tablicę w której kluczami są selektory elementów odświeżanych przy każdym dodaniu elementu do koszyka a wartościami są zmodyfikowane zawartości tych elementów.

W naszej funkcji theme_slug_dynamic_fragment tworzymy kod, który generuje ten sam fragment strony jak kod po stronie motywu a cały wygenerowany kod zapisujemy do zmiennej. Zawartości tej zmiennej następnie umieszczamy w tablicy fragmentów pod kluczem z selektorem CSS naszego elementu.

Na koniec zwracana jest zmodyfikowana tablica fragmentów.

Ważne: Warto zadbać o to by selektor elementu był możliwie unikalny – dzięki temu unikniemy sytuacji w której nasz kod nadpisuje kod innego elementu generowanego przez motyw/wtyczkę.

Podsumowanie

Jak widać WooCommerce znacząco upraszcza proces obsługi odświeżania elementów związanych z koszykiem poprzez AJAX. Mechanizm ten można wykorzystać na wiele sposób, nie tylko do pokazywania informacji o koszyku.

Możemy też przykładowo:

1) Pokazywać informację dla użytkownika po przekroczeniu odpowiedniej liczby produktów w koszyku,

2) Wyświetlać produkty powiązane z ostatnio dodanym produktem (szczególnie przydatne gdy produkt dodawany jest do koszyka na stronie z wieloma produktami),

3) Wyświetlać wiadomość dopiero po dodaniu produktu do koszyka np. z przekierowaniem do strony z dodatkowymi informacjami o danym produkcie.