WooCommerce: Mengapa & Cara Menonaktifkan Fragmen Keranjang Ajax

Jika Anda berada di sini, itu karena situs web WooCommerce Anda lambat dan Anda bertanya-tanya mengapa URL “ /?wc-ajax=get_refreshed_fragments ” menghasilkan penundaan dan beban server (lonjakan).

Selain itu, ada terlalu banyak literatur online tentang WooCommerce Ajax Cart Fragments (termasuk plugin khusus dan opsi plugin kinerja), dan Anda ingin mempelajari dengan cepat apa itu sebelum memahami apakah dan bagaimana Anda harus menonaktifkannya.

Alat pengoptimalan kinerja seperti Pingdom dan GTMetrix sering menyalahkan fungsionalitas WooCommerce kecil ini. Dan menonaktifkannya dengan hati-hati dapat memberi Anda peningkatan kecepatan, pemuatan halaman, dan akhirnya tingkat konversi penjualan.

Jadi, inilah yang perlu Anda ketahui.

Apa itu Fragmen Keranjang Ajax WooCommerce?

Tapi pertama-tama, bagi Anda yang belum tahu: apa itu Ajax ?

Dalam pengembangan web, Ajax ( AJAX = Asynchronous JavaScript And XML ) adalah teknik pengembangan web yang, singkatnya, memungkinkan Anda menjalankan fungsi tanpa menyegarkan halaman situs web .

Pikirkan tentang "Ajax Tambahkan ke Keranjang" di halaman Toko WooCommerce: Anda dapat menambahkan produk ke Keranjang (dan memperbarui Keranjang) tanpa memaksa memuat ulang halaman; Ajax berjalan di latar belakang dan berkomunikasi dengan server "secara tidak sinkron".

Sekarang setelah ini jelas, mari kita cari tahu apa itu WooCommerce Ajax Cart Fragments dan apa yang diwakili oleh URL “ situsanda.com/?wc-ajax=get_refreshed_fragments ”.

Singkat cerita, bahkan di situs kecil, dan bahkan di halaman non-WooCommerce, WooCommerce mencoba untuk "mendapatkan" detail keranjang belanja sehingga siap untuk "menghitung ulang" Keranjang setiap kali sesuatu dilakukan (atau tidak dilakukan!) pada halaman WordPress tertentu.

Ini memungkinkan WooCommerce untuk terus memperbarui widget Keranjang dan untuk segera "mendengarkan" acara Ajax Add to Cart yang mungkin memerlukan pembaruan Keranjang .

Pada dasarnya, WooCommerce memanggil “ /?wc-ajax=get_refreshed_fragments ” untuk memperbarui item Keranjang dan total Keranjang secara asinkron yaitu tanpa perlu menyegarkan halaman situs web yang Anda kunjungi.

Ajax luar biasa dan semuanya, namun jangan meremehkan implikasi kinerja dan konflik plugin yang mungkin disebabkan oleh fungsi kecil ini. Yang membawa kita ke bagian selanjutnya…

Mengapa menonaktifkan Fragmen Keranjang Ajax WooCommerce?

Untuk membuat pembaruan Keranjang di setiap halaman situs web Anda, WooCommerce menjalankan fungsi Ajax ini setiap saat.

Bahkan di halaman Tentang. Bahkan di beranda jika Anda tidak memiliki produk. Bahkan di halaman Kontak jika Anda hanya memiliki formulir kontak.

Jika tema Anda tidak menyediakan widget drop-down keranjang WooCommerce, dan jika Anda tidak memiliki produk yang dapat ditambahkan ke Keranjang pada halaman situs web tertentu, maka Anda sebaiknya menghapus seluruh fungsi Ajax.

Terlebih lagi, jika Anda memilih dari pengaturan WooCommerce untuk mengarahkan pengguna ke Keranjang setelah menambahkan produk apa pun ke Keranjang, Anda pasti memaksa pengalihan halaman (ke halaman Keranjang), jadi mengaktifkan Fragmen Keranjang Ajax tidak ada gunanya.

Idealnya, satu-satunya tempat di mana “ /?wc-ajax=get_refreshed_fragments ” harus dijalankan adalah halaman dan arsip WooCommerce tempat pelanggan Anda dapat menambahkan ke troli DAN Anda ingin menggunakan widget troli dinamis

Misalnya, jika Anda memiliki tombol Tambahkan ke Keranjang di halaman kategori DAN Anda ingin widget Keranjang diperbarui tanpa memuat ulang halaman (dan Anda telah mengaktifkan Ajax add to cart), maka Anda memerlukan “ /?wc-ajax=get_refreshed_fragments “ aktif.

Selain itu, pada halaman Keranjang Anda dapat mengubah jumlah atau menghapus item tanpa menyegarkan halaman, dan di sana Anda juga ingin widget Keranjang diperbarui (tetapi pertanyaan sebenarnya di sini adalah: mengapa ada widget keranjang di halaman Keranjang seperti itu tidak masuk akal? ). Jadi, pada halaman Keranjang Anda juga perlu "/?wc-ajax=get_refreshed_fragments" aktif, atau widget tidak akan menyegarkan jika Anda memperbarui Keranjang.

Kesimpulan:

1. jika tema Anda TIDAK memiliki widget Keranjang header dinamis , Anda dapat menonaktifkan “/?wc-ajax=get_refreshed_fragments”
2. jika tema Anda memiliki widget Keranjang header dinamis, tetapi Anda tidak peduli untuk menampilkan konten widget Keranjang saat bepergian , Anda dapat menonaktifkan “/?wc-ajax=get_refreshed_fragments” di mana saja
3. jika Anda ingin menjaga fungsionalitas widget Keranjang tetap aktif , Anda harus menonaktifkan “/?wc-ajax=get_refreshed_fragments” HANYA pada halaman-halaman di mana tidak ada fungsi Ajax Add to Cart (Arsip Produk WooCommerce) atau fungsionalitas pembaruan Keranjang (halaman Keranjang)

Bagaimana Cara Menonaktifkan Fragmen Keranjang Ajax WooCommerce?

Sekarang setelah kita memahami apa itu Fragmen Keranjang dan mengapa/kapan harus dihapus, kita bisa masuk ke sedikit pengkodean.

Tentu saja, ada plugin untuk itu – tetapi ketika Anda dapat mencapai fungsionalitas seperti ini dengan beberapa baris PHP, tidak masuk akal untuk menemukan solusi yang berbeda, bahkan jika Anda tidak tahu cara membuat kode.

Tapi pertama-tama, mari kita lihat bagaimana WooCommerce menambahkan panggilan Ajax ini (dalam istilah pengembangan kami akan mengatakan "bagaimana itu membuat skrip ini mengantre ").

Pertama-tama, skrip " wc-cart-fragments " dijelaskan oleh fungsi yang disebut "register_scripts()". Itu memanggil skrip JS dari folder /assets dan membutuhkan JQuery dan cookie untuk diaktifkan:

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

Dalam file yang sama, ini adalah waktu " wc-cart-fragments " dipanggil:

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

Jika kita melihat fungsi “enqueue_script()”, kita akan menemukan bahwa skrip “ wc-cart-fragments ” kita pertama kali terdaftar dan kemudian di-enqueued sesuai dengan dokumentasi WordPress (https://developer.wordpress.org/reference/ fungsi/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 );
}

Jika ada sesuatu yang "diantrekan", maka itu bisa "diantrekan" (mirip dengan fungsi add_action() dan remove_action() PHP).

Anda harus memastikan untuk memanggil fungsi "dequeue" SETELAH yang "enqueue", sehingga sudah ditambahkan dan Anda dapat menghapusnya (maka prioritas = 11 karena "wc-cart-fragments" diantrekan pada prioritas default 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' ); 
}

Harap dicatat bahwa jika Anda memiliki widget keranjang header, ini akan merusak "keranjang dropdown". Anda masih dapat melihat jumlah item dan total keranjang di header, tetapi saat mengarahkan kursor Anda tidak akan mendapatkan item dan tombol keranjang/pembayaran .

Di Business Bloomer, saya sepenuhnya menonaktifkan widget Keranjang sehingga masuk akal untuk menggunakan fungsi ini.

Jika Anda hanya ingin mengoptimalkan beranda dan meninggalkan “wc-cart-fragments” di laman situs web lain , Anda dapat menggunakan cuplikan ini sebagai gantinya:

/**
 * @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' ); 
}

Pikiran Terakhir: Fragmen Keranjang Ajax WooCommerce Ya atau Tidak?

Kami telah melihat bahwa menonaktifkan Fragmen Keranjang Ajax "bisa" memberi Anda peningkatan kecepatan situs web tetapi juga "dapat" menyebabkan beberapa masalah, terutama jika Anda ingin tetap menggunakan widget Keranjang tarik-turun Anda.

Jadi, di bagian ini saya ingin melihat apa yang telah ditemukan orang lain sehubungan dengan “/?wc-ajax=get_refreshed_fragments”.

Apakah itu benar-benar memberi Anda lebih banyak manfaat daripada kerugian? Apakah itu benar-benar meningkatkan kecepatan halaman situs web Anda? Apakah layak untuk menonaktifkan Fragmen Keranjang?

Peringatan spoiler: itu tergantung .

Colm Troy dari CommerceGurus menguji secara mendalam Fragmen Keranjang Ajax (serta bagian lain yang harus Anda baca di artikelnya: https://www.commercegurus.com/guides/speed-up-woocommerce/) dan, dalam panduannya, dia menemukan itu:

…waktu permintaan “/?wc-ajax=get_refreshed_fragments” membutuhkan waktu 448 md, yang sejauh ini merupakan permintaan http paling lambat kami saat ini.

Pada beberapa server yang lebih lambat dengan basis data yang besar dan tidak dioptimalkan dengan baik, permintaan ini seringkali membutuhkan waktu lebih dari 1-2 detik untuk dieksekusi.

Kabar baiknya adalah bahwa permintaan ini tidak memblokir dan dijalankan dengan baik setelah DOM dimuat sehingga secara umum tidak merusak waktu muat yang kami rasakan (tetapi jelas merusak waktu kami yang terisi penuh dan dapat merusak beberapa hal yang dikhawatirkan oleh GPSI seperti Waktu ke Interaktif dan CPU pertama menganggur).

Dia juga mengatakan kepada saya baru-baru ini bahwa:

Saya sampai pada kesimpulan bahwa pemula WooCommerce sering berakhir dengan merusak situs mereka dengan menghapus fragmen karena mereka belum sepenuhnya memikirkan semua skenario yang berbeda di mana widget keranjang dapat muncul jadi itu pasti salah satu untuk melanjutkan dengan hati-hati.

Di toko WooCommerce dengan lonjakan beban dan banyak lalu lintas, hal pertama yang kami lakukan adalah menghapus fragmen troli, menghapus widget troli, dan meminta pelanggan diarahkan ke troli setelah menambahkan ke troli .

Membuat semuanya tetap bagus, sederhana, dan cepat

Ingin melanjutkan percakapan? Bagikan umpan balik, tes, dan pendapat Anda di komentar