Jadi, Anda telah membuat tema WooCommerce khusus yang menarik. Kelihatannya ramping, berlari cepat, dan membuat Anda tersenyum. Namun ada masalah kecil—mini-cart tidak diperbarui sebagaimana mestinya. Anda mengklik “Tambahkan ke Keranjang,” dan tidak ada perubahan hingga halaman disegarkan. Tidak keren, bukan? Jangan khawatir. Artikel ini akan memandu Anda tentang cara memperbaikinya dan menjadikan kereta mini Anda secepat dan responsif seperti tata letak baru Anda yang apik.
TL;DR
Jika mini-cart WooCommerce Anda tidak diperbarui dengan benar di tema khusus Anda, kemungkinan karena JavaScript tidak menyegarkan fragmen keranjang. Anda pasti ingin memastikan skrip fragmen keranjang WooCommerce dimuat. Jika Anda banyak melakukan penyesuaian, Anda mungkin juga perlu memicu pembaruan secara manual menggunakan JavaScript atau AJAX. Ikuti panduan ini agar keranjang Anda menampilkan pembaruan secara instan, tanpa memuat ulang!
Pertama, Pahami Apa Fungsi Mini-Cart
Itu gerobak mini adalah keranjang tarik-turun atau bilah sisi kecil yang lucu yang muncul saat pengguna menambahkan sesuatu ke keranjang mereka. Ini menunjukkan ringkasan singkat produk, jumlah, dan total mereka, tanpa perlu memuat ulang satu halaman penuh. Ini dilakukan dengan menggunakan WooCommerce Fragmen Keranjang AJAX.
Namun, saat Anda membuat tema khusus atau mengubah DOM terlalu banyak, WooCommerce mungkin tidak tahu di mana atau kapan harus memperbarui mini-cart. Saat itulah segalanya rusak.
Langkah 1: Periksa Apakah Fragmen Keranjang Sedang Dimuat
WooCommerce biasanya menambahkan file JavaScript bernama keranjang-fragmen.js. Skrip ini mendengarkan pembaruan dan menyegarkan mini-cart secara otomatis. Namun terkadang, itu terhapus secara tidak sengaja. Mari kita periksa apakah sedang memuat.
- Buka situs web Anda di Chrome.
- Klik kanan > Inspeksi untuk membuka DevTools.
- Klik pada Jaringan tab dan segarkan halaman.
- Cari
cart-fragments. Jika Anda melihatnya, berarti sedang memuat. Hore!
Jika tidak ada, Anda harus memasukkannya ke dalam antrean secara manual.
Cara Mengantrekan Fragmen Keranjang JS
Dalam tema Anda functions.phptambahkan cuplikan ini:
function load_woocommerce_scripts() {
if (function_exists('is_woocommerce') && is_woocommerce()) {
wp_enqueue_script( 'wc-cart-fragments' );
}
}
add_action( 'wp_enqueue_scripts', 'load_woocommerce_scripts', 20 );
Ini akan memastikan fitur WooCommerce AJAX dimuat dengan benar.
Langkah 2: Pastikan Markup Mini-Cart WooCommerce Ada
Skrip fragmen keranjang memperbarui wadah HTML tertentu melalui AJAX. Itu berarti markup yang diharapkan harus ada di tema Anda.
WooCommerce mencari markup ini:
... the mini-cart HTML ...
Jika itu widget_shopping_cart_content wadah hilang atau diganti namanya, pembaruan tidak akan berfungsi.
Untuk memperbaikinya:
- Periksa file template mini-cart Anda.
- Pastikan container memiliki kelas yang tepat.
- Hindari mengganti nama kelas WooCommerce kecuali Anda tahu persis apa yang Anda lakukan.
Pendekatan terbaik? Salin template mini-cart dari plugin WooCommerce ke tema Anda dan modifikasi dengan hati-hati.
Langkah 3: Perbarui Mini-Cart secara manual dengan JavaScript
Jika tema Anda sangat khusus atau menggunakan AJAX khusus untuk “Tambahkan ke Keranjang,” WooCommerce mungkin tidak menyegarkan mini-cart secara otomatis. Dalam hal ini, Anda harus menyegarkannya secara manual setelah acara add-to-cart berhasil.
Berikut cuplikan JavaScript sederhana yang memicu penyegaran fragmen keranjang:
jQuery( document.body ).trigger( 'wc_fragment_refresh' );
Gunakan ini setelah fungsi tambahkan ke troli khusus Anda di:
- File skrip khusus
- Panggilan AJAX WooCommerce
- Skrip inline setelah AJAX sukses
Ini memberi tahu WooCommerce: “Hei! Ada yang berubah! Tolong perbarui mini-cart itu!”
Langkah 4: Periksa kembali AJAX “Tambahkan ke Keranjang”
WooCommerce hanya memicu penyegaran mini-cart jika produk ditambahkan melalui AJAX. Jika tema khusus Anda menggunakan tautan langsung seperti ?add-to-cart=123maka itu tidak akan memicu peristiwa yang tepat.
Pastikan Anda menggunakan markup formulir AJAX yang tepat, seperti ini:
Ini penting—WooCommerce memiliki penangan bawaan yang mendengarkan pengiriman formulir ini dan mengaktifkan panggilan add-to-cart AJAX. Jika tema Anda terlalu sering menulis ulang formulir ini, WooCommerce mungkin berhenti mengenalinya.
Langkah 5: Dengarkan Tindakan Kustom
Jika Anda menambahkan ke troli melalui AJAX Anda sendiri, Anda mungkin memerlukan metode yang lebih canggih. Dengarkan acara khusus lalu muat ulang mini-cart Anda secara manual menggunakan jQuery:
jQuery( document.body ).on( 'added_to_cart', function(){
jQuery( document.body ).trigger( 'wc_fragment_refresh' );
});
Dengan cara ini, bahkan acara AJAX Anda sendiri dapat terhubung kembali ke sistem WooCommerce dengan baik. Anda mendapatkan pengalaman berbelanja yang sempurna dan lancar yang kita semua impikan.
Langkah 6: Hapus Plugin Caching Anda
Terkadang, itu bukan kode Anda. Ini adalah plugin cache Anda. Alat seperti WP Rocket, W3 Total Cache, atau LiteSpeed Cache dapat mencegah bagian dinamis seperti mini-cart disegarkan dengan benar.
Coba ini:
- Hapus semua cache Anda
- Nonaktifkan minifikasi (hanya untuk pengujian!)
- Aktifkan “jangan cache fragmen dinamis” untuk WooCommerce
Kemudian muat ulang dan uji lagi. Jika berhasil, siapkan pengecualian khusus sehingga keranjang Anda tetap dinamis meskipun cache diaktifkan.
Tip Bonus: Debug Seperti Seorang Profesional
Masih macet? Tambahkan beberapa log konsol untuk melihat apakah peristiwa diaktifkan:
jQuery( document.body ).on( 'added_to_cart', function(){
console.log('Product added! Refreshing mini-cart.');
});
Coba juga:
- Nonaktifkan plugin lain untuk menghindari konflik
- Beralih sebentar ke tema Storefront untuk membandingkan perilaku
- Aktifkan kembali fitur satu per satu untuk menemukan pelakunya
Debugging bisa menjadi permainan kesabaran. Tapi percayalah pada kami—Anda punya ini!
Kesimpulan: Anda Sekarang Menjadi Master Mini-Cart
Mini-cart WooCommerce adalah fitur hebat, tetapi agak pilih-pilih dalam hal tema khusus. Kuncinya adalah memastikan ia mengetahui apa yang terjadi—dan memiliki alat (skrip dan markup) untuk merespons.
Jika Anda:
- Pastikan skrip keranjang WooCommerce dimuat
- Pertahankan struktur HTML yang diharapkan
- Keranjang pemicu disegarkan secara manual bila diperlukan
…maka kamu emas. Kereta mini akan mengikuti perkembangan toko bergaya Anda secara real-time.
Selamat coding, dan pelanggan bahkan lebih bahagia!