WooCommerce AJAX dodaj do koszyka – samouczek krok po kroku

Opublikowany: 2019-11-20

Kilka tygodni temu rozmawialiśmy o tym, jak programowo dodać funkcję koszyka, aby zwiększyć sprzedaż. Dzisiaj przyjrzymy się, jak zaimplementować AJAX w przycisku Dodaj do koszyka w produktach WooCommerce . Poprawi to wygodę użytkownika i ogólny proces sprzedaży, co pomoże zoptymalizować sklep i zwiększyć przychody.

W dzisiejszych czasach, jeśli chcesz prowadzić dobrze prosperujący sklep, kluczowe jest, aby Twoja witryna dynamicznie aktualizowała koszyk. W przeciwnym razie za każdym razem, gdy użytkownik doda produkt do koszyka, strona zostanie ponownie załadowana, co spowoduje bardzo powolny proces zakupu i zwiększy szanse na rezygnację klientów. Dlatego modernizacja sklepu dzięki funkcji dodawania do koszyka WooCommerce AJAX jest koniecznością, aby ograniczyć porzucanie koszyków i zwiększyć sprzedaż.

W tym przewodniku pokażemy Ci, jak to zrobić krok po kroku.

Korzyści z AJAX w WooCommerce

Podsumowując, korzyści płynące z zastosowania AJAX w Twoim sklepie to:

Zmniejsz obciążenie serwera i przepustowość
Przyspiesz proces zakupu
Popraw jakość obsługi klienta
Zmniejsz porzucanie koszyka
Zwiększ współczynniki konwersji

Tutorial: WooCommerce AJAX dodaj do koszyka

Aby zastosować funkcję AJAX add to cart w WooCommerce istnieją dwie możliwości:

Z wtyczką
Kodujesz to sam

Przyjrzyjmy się każdej metodzie.

1) AJAX dodaj do koszyka z wtyczką

Jeśli nie masz doświadczenia w programowaniu lub wolisz proste rozwiązanie, skorzystanie z wtyczki to doskonały wybór. Po prostu pobierz naszą wtyczkę AJAX add to cart WooCommerce, zainstaluj ją, a oprogramowanie zajmie się resztą.

Ajax dodaj do koszyka dla WooCommerce

Dodaj AJAX do koszyka dla WooCommerce to jedna z najlepszych wtyczek do dodania AJAX do przycisku Dodaj do koszyka WooCommerce. To narzędzie pozwala kupującym umieszczać w koszyku pojedyncze lub zmienne produkty bez konieczności każdorazowego ponownego ładowania witryny. Co jeszcze lepsze, działa płynnie w 99% motywów WordPress i nie wymaga żadnej wstępnej konfiguracji. Po zainstalowaniu będzie gotowy do pracy.

2) Zakoduj to sam

Czy masz jakieś umiejętności kodowania i wolisz dostosować przycisk dodawania do koszyka WooCommerce AJAX? W tym przewodniku pokażemy Ci, jak to zrobić krok po kroku.

A) Zainstaluj motyw potomny

Pierwszą rzeczą, którą musisz zrobić, to utworzyć motyw potomny . Jeśli go nie masz, możesz użyć wtyczki. Jest ich kilka, więc wybierz ten, który najbardziej Ci się podoba i zainstaluj go w swoim sklepie. Dlaczego powinieneś zainstalować motyw potomny? Ponieważ jeśli bezpośrednio dostosujesz pliki motywu, przy następnej aktualizacji motywu nowe pliki zastąpią zmiany, a wszystkie dostosowania zostaną utracone. Jeśli jednak dostosujesz motyw podrzędny, modyfikacje nie zostaną nadpisane.

B) Dołącz plik JavaScript (JS)

W pliku functions.php motywu potomnego dołącz plik JavaScript, używając zaczepu wp_enqueue_script . Jest to jeden z najpopularniejszych haczyków, które WordPress oferuje do dostosowywania stron internetowych. Rzućmy okiem na skrypt, który zawiera plik ajax_add_to_cart.js poniżej:

 funkcja ql_woocommerce_ajax_add_to_cart_js() {
    if (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0' );
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

Z warunkowym if (function_exists('is_product') && is_product()) w wierszu 2, upewniasz się, że JQuery jest stosowane tylko na stronie produktu.

C) Utwórz plik JS

Gdy to zrobisz, utwórz plik dołączony w poprzednim kroku. Po prostu przejdź do swojego cPanel , a następnie do folderu motywu podrzędnego . Następnie postępuj zgodnie z trasą wp_content /themes/ folder . Tam utwórz nowy folder w motywie potomnym o nazwie js , a następnie znajdujący się w nim plik o tej samej nazwie, której użyłeś w haczyku ajax-add-to-cart.js . Pamiętaj, że ten krok działa również, nawet jeśli używasz klienta FTP. Jeśli Twój motyw podrzędny ma już folder JS, możesz go użyć bez tworzenia nowego.

D) Plik JQuery/JS

Następnym krokiem jest praca nad plikiem JQuery przesłanym w motywie podrzędnym. Ten plik jest pusty, więc musisz dodać skrypty. Po pierwsze, zapobiegaj ponownemu ładowaniu strony przez przycisk dodawania do koszyka za pomocą następującego skryptu:

 $('.single_add_to_cart_button').on('klik', function(e) { 
    e.zapobiegnijDefault();
});

Pamiętaj, że używamy selektora $('.single_add_to_cart_button') do wyzwalania wywołania AJAX po kliknięciu przycisku. Musisz to zrozumieć, ponieważ cały poniższy skrypt zostanie umieszczony w tej funkcji.

E) JQuery WooCommerce AJAX dodaj do koszyka na pojedynczych produktach

Tak więc pełny skrypt JQuery dla AJAX dodaj do koszyka dla pojedynczych produktów to:

 jQuery(dokument).gotowy(funkcja($) {
    $('.single_add_to_cart_button').on('klik', funkcja(e){ 
    e.zapobiegnijDefault();
    $ten przycisk = $(to),
                $form = $thisbutton.closest('form.cart'),
                id = $ten przycisk.val(),
                product_qty = $form.find('input[nazwa=ilość]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || ID,
                id_wariacji = $form.find('input[name=identyfikator_wariacji]').val() || 0;
    dane zmiennej = {
            akcja: 'ql_woocommerce_ajax_add_to_cart',
            product_id: product_id,
            product_sku: '',
            ilość: product_ilty,
            identyfikator_odmiany: identyfikator_odmiany,
        };
    $.ajax({
            wpisz: 'post',
            url: wc_add_to_cart_params.ajax_url,
            dane: dane,
            beforeSend: function (odpowiedź) {
                $thisbutton.removeClass('dodano').addClass('ładowanie');
            },
            kompletna: funkcja (odpowiedź) {
                $thisbutton.addClass('dodane').removeClass('ładowanie');
            }, 
            sukces: funkcja (odpowiedź) { 
                if (response.error & response.product_url) {
                    window.location = odpowiedź.product_url;
                    powrót;
                } w przeciwnym razie { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) Skrypt PHP

Później potrzebujesz obsługi PHP. Najlepszym sposobem jest użycie niektórych haczyków filtrów WooCommerce do zbudowania funkcji dodawania do koszyka . Tym razem zrobisz to za pomocą AJAX. Po prostu skopiuj i wklej następujący skrypt w pliku functions.php motywu potomnego poniżej poprzedniego skryptu, którego użyliśmy do dołączenia pliku JS.

 add_action ('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 
add_action ('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          
funkcja ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $ilość = pusta($_POST['ilość']) ? 1 : wc_stock_amount($_POST['ilość']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $ilość);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $ilość), prawda); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } w przeciwnym razie { 
                $dane = tablica( 
                    'błąd' => prawda,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($dane);
            }
            wp_die();
        }

Otóż to! Właśnie utworzyłeś swój przycisk Dodaj do koszyka WooCommerce AJAX ! Ale skąd wiesz, że zrobiłeś wszystko poprawnie? Możesz to łatwo sprawdzić. Po kliknięciu przycisku dodaj do koszyka produkt powinien zostać dodany do koszyka bez przeładowywania strony.

Wniosek

Podsumowując, jeśli chcesz zoptymalizować swój sklep, funkcja dodawania do koszyka WooCommerce AJAX jest koniecznością. Najłatwiejszym sposobem jej zastosowania jest użycie wtyczki AJAX add to cart WooCommerce. Jeśli jednak masz umiejętności kodowania, możesz samodzielnie dodać kod AJAX do koszyka z motywem potomnym i odrobiną PHP, jak opisano powyżej.

Obie opcje są doskonałe, więc wybierz tę, która lepiej odpowiada Twoim potrzebom i umiejętnościom. Pomoże to poprawić wrażenia użytkownika i zwiększyć współczynniki konwersji. Daj nam znać swoje przemyślenia w sekcji komentarzy poniżej.

Na koniec, aby uzyskać więcej przewodników na temat WooCommerce, zalecamy zapoznanie się z naszymi przewodnikami na temat dodawania produktów WooCommerce i tworzenia domyślnych atrybutów produktów w WooCommerce.