WooCommerce: Dlaczego i jak wyłączyć fragmenty koszyka Ajax

Jeśli tu jesteś, to dlatego, że Twoja witryna WooCommerce działa wolno i zastanawiasz się, dlaczego adres URL „ /?wc-ajax=get_refreshed_fragments ” generuje opóźnienia i obciążenia serwera (skoki).

Poza tym jest zbyt dużo literatury online na temat fragmentów koszyka WooCommerce Ajax (w tym określonych wtyczek i opcji wtyczek wydajnościowych) i chcesz szybko dowiedzieć się, czym one są, zanim zrozumiesz, czy i jak je wyłączyć.

Narzędzia do optymalizacji wydajności, takie jak Pingdom i GTMetrix, często obwiniają tę małą funkcjonalność WooCommerce. Ostrożne wyłączenie go może zwiększyć szybkość, ładowanie strony i ostatecznie współczynnik konwersji sprzedaży.

Oto wszystko, co musisz wiedzieć.

Czym są fragmenty koszyka Ajax WooCommerce?

Ale najpierw dla tych z Was, którzy tego nie wiedzą: czym jest Ajax ?

W tworzeniu stron internetowych Ajax ( AJAX = Asynchronous JavaScript And XML ) to technika tworzenia stron internetowych, która w skrócie pozwala uruchamiać funkcje bez odświeżania stron internetowych .

Pomyśl o „Ajax Dodaj do koszyka” na stronie sklepu WooCommerce: możesz dodawać produkty do koszyka (i aktualizować koszyk) bez wymuszania ponownego ładowania strony; Ajax działa w tle i komunikuje się z serwerem „asynchronicznie”.

Teraz, gdy jest to jasne, zastanówmy się, czym są fragmenty koszyka Ajax WooCommerce i co reprezentuje adres URL „ twojastrona.com/?wc-ajax=get_refreshed_fragments ”.

Krótko mówiąc, nawet na małych witrynach, a nawet na stronach innych niż WooCommerce, WooCommerce próbuje „uzyskać” szczegóły koszyka na zakupy, aby mógł być gotowy do „przeliczenia” koszyka za każdym razem, gdy coś jest zrobione (lub nie zrobione!). na danej stronie WordPress.

Dzięki temu WooCommerce może aktualizować widżet koszyka i natychmiast „słuchać” dowolnego zdarzenia Ajax Add to Cart, które może wymagać aktualizacji koszyka .

Zasadniczo WooCommerce wywołuje „ /?wc-ajax=get_refreshed_fragments ” w celu asynchronicznej aktualizacji pozycji koszyka i sumy koszyka, tj. bez konieczności odświeżania odwiedzanej strony internetowej.

Ajax jest niesamowity i wszystko, jednak nie lekceważ implikacji wydajności i konfliktów wtyczek, które może spowodować ta niewielka funkcjonalność. Co prowadzi nas do następnej sekcji…

Dlaczego wyłączyć fragmenty koszyka WooCommerce Ajax?

Aby zaktualizować koszyk na każdej stronie Twojej witryny, WooCommerce uruchamia tę funkcję Ajax za każdym razem.

Nawet na stronie Informacje. Nawet na stronie głównej, jeśli nie masz produktów. Nawet na stronie Kontakt, jeśli masz tylko formularz kontaktowy.

Jeśli Twój motyw nie zawiera widżetu rozwijanego koszyka WooCommerce i jeśli nie masz produktów, które można dodać do koszyka na określonej stronie internetowej, lepiej usuń całą funkcjonalność Ajax.

Co więcej, jeśli wybierzesz w ustawieniach WooCommerce przekierowanie użytkowników do koszyka po dodaniu dowolnego produktu do koszyka, zdecydowanie wymuszasz przekierowanie strony (do strony koszyka), więc posiadanie aktywnych fragmentów koszyka Ajax jest zupełnie bezcelowe.

Idealnie, jedynymi miejscami, w których powinien działać „ /?wc-ajax=get_refreshed_fragments ” są strony i archiwa WooCommerce, na których Twoi klienci mogą dodawać do koszyka ORAZ chcesz użyć dynamicznego widżetu koszyka

Na przykład, jeśli masz przyciski Dodaj do koszyka na stronach kategorii ORAZ chcesz, aby widżet koszyka aktualizował się odpowiednio bez przeładowania strony (i masz włączone dodawanie Ajax do koszyka), potrzebujesz „ /?wc-ajax=get_refreshed_fragments ” aktywny.

Poza tym na stronie Koszyk możesz zmieniać ilości lub usuwać przedmioty bez odświeżania strony, a tam również chcesz, aby widżet koszyka odpowiednio się zaktualizował (ale prawdziwe pytanie brzmi: dlaczego na stronie Koszyk jest widżet koszyka jako nie ma sensu? ). Tak więc na stronie koszyka potrzebujesz również aktywnego „/?wc-ajax=get_refreshed_fragments” , w przeciwnym razie widżet nie odświeży się, jeśli zaktualizujesz koszyk.

Wniosek:

1. jeśli Twój motyw NIE ma widżetu koszyka z dynamicznym nagłówkiem , możesz wyłączyć „/?wc-ajax=get_refreshed_fragments”
2. jeśli Twój motyw ma dynamiczny nagłówek widżetu koszyka, ale nie zależy Ci na wyświetlaniu zawartości widżetu koszyka w podróży , możesz wszędzie wyłączyć „/?wc-ajax=get_refreshed_fragments”
3. jeśli chcesz, aby funkcja widżetu koszyka była aktywna , powinieneś wyłączyć „/?wc-ajax=get_refreshed_fragments” TYLKO na tych stronach, na których nie ma funkcji Ajax Dodaj do koszyka (Archiwum produktów WooCommerce) lub funkcji aktualizacji koszyka (strona koszyka)

Jak wyłączyć fragmenty koszyka WooCommerce Ajax?

Teraz, gdy zrozumieliśmy, czym są fragmenty koszyka i dlaczego/kiedy należy je usunąć, możemy zająć się trochę kodowaniem.

Oczywiście są do tego wtyczki – ale kiedy możesz osiągnąć funkcjonalność taką jak ta za pomocą kilku linijek PHP, nie ma sensu szukać innego rozwiązania, nawet jeśli nie wiesz, jak kodować.

Ale najpierw zobaczmy, jak WooCommerce dodaje to wywołanie Ajax (w kategoriach programistycznych powiedzielibyśmy „jak umieszcza ten skrypt w kolejce ”).

Przede wszystkim skrypt „ wc-cart-fragments ” jest opisany przez funkcję o nazwie „register_scripts()”. Wywołuje skrypt JS z folderu /assets i wymaga włączenia JQuery i plików cookie:

'wc-cart-fragments' => array(
	'src'     => self::get_asset_url( 'assets/js/frontend/cart-fragments' . $suffix . '.js' ),
	'deps'    => array( 'jquery', 'js-cookie' ),
	'version' => WC_VERSION,
),

W tym samym pliku jest to czas wywołania „ wc-cart-fragments ”:

self::enqueue_script( 'wc-cart-fragments' );

Jeśli spojrzymy na funkcję „enqueue_script()”, dowiemy się, że nasz skrypt „ wc-cart-fragments ” jest najpierw rejestrowany, a następnie umieszczany w kolejce zgodnie z dokumentacją WordPressa (https://developer.wordpress.org/reference/ funkcje/wp_enqueue_script):

private static function enqueue_script( $handle, $path = '', $deps = array( 'jquery' ), $version = WC_VERSION, $in_footer = true ) {
	if ( ! in_array( $handle, self::$scripts, true ) && $path ) {
		self::register_script( $handle, $path, $deps, $version, $in_footer );
	}
	wp_enqueue_script( $handle );
}

Jeśli coś jest „umieszczone w kolejce”, to można je „usunąć z kolejki” (podobnie do funkcji PHP add_action() i remove_action()).

Musisz koniecznie wywołać funkcję „usuń kolejkę” PO funkcji „uzupełnij”, aby została już dodana i można ją usunąć (stąd priorytet = 11, ponieważ „wc-cart-fragments” jest umieszczany w kolejce z domyślnym priorytetem 10).

Tl;dr:

/**
 * @snippet       Disable WooCommerce Ajax Cart Fragments Everywhere
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.6.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp_enqueue_scripts', 'bbloomer_disable_woocommerce_cart_fragments', 11 ); 

function bbloomer_disable_woocommerce_cart_fragments() { 
	wp_dequeue_script( 'wc-cart-fragments' ); 
}

Pamiętaj, że jeśli masz widżet nagłówka koszyka, spowoduje to przerwanie „rozwijanego koszyka”. W nagłówku nadal będzie można zobaczyć liczbę przedmiotów i sumę koszyka, ale po najechaniu kursorem nie zobaczysz elementów ani przycisków koszyka/kasy .

W Business Bloomer całkowicie wyłączyłem widżet Koszyk, dlatego warto korzystać z tej funkcji.

Jeśli chcesz po prostu zoptymalizować swoją stronę główną i pozostawić „wc-cart-fragments” na innych stronach witryny , możesz zamiast tego użyć tego fragmentu:

/**
 * @snippet       Disable WooCommerce Ajax Cart Fragments On Static Homepage
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.6.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp_enqueue_scripts', 'bbloomer_disable_woocommerce_cart_fragments', 11 ); 

function bbloomer_disable_woocommerce_cart_fragments() { 
	if ( is_front_page() ) wp_dequeue_script( 'wc-cart-fragments' ); 
}

Końcowe myśli: Fragmenty koszyka WooCommerce Ajax Tak czy nie?

Widzieliśmy, że wyłączenie fragmentów koszyka Ajax „może” zwiększyć szybkość witryny, ale także „może” spowodować pewne problemy, głównie jeśli chcesz nadal korzystać z rozwijanego widżetu koszyka.

Tak więc w tej sekcji chcę zobaczyć, co inni odkryli w odniesieniu do „/?wc-ajax=get_refreshed_fragments”.

Czy to naprawdę daje więcej korzyści niż wad? Czy to naprawdę zwiększa szybkość strony internetowej? Czy warto wyłączać fragmenty koszyka?

Uwaga, spoiler: to zależy .

Colm Troy z CommerceGurus dokładnie przetestował fragmenty koszyka Ajax (a także inne fragmenty, które powinieneś przeczytać w jego artykule: https://www.commercegurus.com/guides/speed-up-woocommerce/) i dowiedział się w swoim przewodniku że:

…czas żądania „/?wc-ajax=get_refreshed_fragments” zajmuje 448 ms, co jest zdecydowanie naszym najwolniejszym żądaniem http w tym momencie.

Na niektórych wolniejszych serwerach z dużymi, słabo zoptymalizowanymi bazami danych wykonanie tego żądania może często trwać dłużej niż 1-2 sekundy.

Dobrą wiadomością jest to, że to żądanie nie blokuje się i wykonuje się dobrze po załadowaniu DOM, więc ogólnie nie szkodzi naszym postrzeganym czasom ładowania (ale zdecydowanie szkodzi naszym czasom pełnego załadowania i może zaszkodzić niektórym rzeczom, o które martwi GPSI, np. Czas do trybu interaktywnego i pierwszego bezczynności procesora).

Powiedział mi też niedawno, że:

Doszedłem do wniosku, że nowicjusze WooCommerce często psują swoje witryny, usuwając fragmenty, ponieważ nie przemyślili w pełni wszystkich scenariuszy, w których może pojawić się widżet koszyka, więc zdecydowanie należy postępować ostrożnie.

W sklepach WooCommerce ze skokami obciążenia i tonami ruchu pierwszą rzeczą, którą robimy, jest usuwanie fragmentów koszyka, usuwanie widżetów koszyka i przekierowanie klientów do koszyka po dodaniu do koszyka .

Utrzymuje rzeczy ładne, proste i szybkie

Chcesz kontynuować rozmowę? Podziel się swoją opinią, testami i opinią w komentarzach