Cara Ajaxify Mengira Item Troli Pengepala dalam WooCommerce: Panduan Langkah demi Langkah

Susan Sarandon
Lepaskan: 2024-10-30 11:29:26
asal
990 orang telah melayarinya

How to Ajaxify Header Cart Items Count in WooCommerce: A Step-by-Step Guide

Pengiraan Item Troli Pengepala Ajaxify dalam WooCommerce

Pengenalan

Mengemas kini kiraan item troli pengepala tanpa memuat semula halaman meningkatkan pengalaman pengguna. Mari kita mendalami masalah dan penyelesaiannya.

Pernyataan Masalah

Matlamatnya adalah untuk mendapatkan secara dinamik jumlah item troli daripada pelayan menggunakan jQuery. Walau bagaimanapun, pelaksanaan semasa menghadapi kesukaran apabila berbilang item ditambah serentak.

Penyelesaian

1. Menggunakan cangkuk WooCommerce khusus

Daripada memuat semula manual, gunakan cangkuk tindakan woocommerce_add_to_cart_fragments, yang dikuasakan oleh Ajax:

  • Benamkan kiraan troli dalam HTML dengan ID atau kelas yang unik, cth.
    ...
    .
  • Tambahkan kod berikut pada functions.php anda:
<code class="php">add_filter('woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
function wc_refresh_mini_cart_count($fragments) {
    ob_start();
    $items_count = WC()->cart->get_cart_contents_count();
    ?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : ' '; ?></div>
    <?php
    $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}</code>
Salin selepas log masuk

2. Menggunakan jQuery untuk memaksa muat semula

Jika perlu, paksa muat semula kiraan menggunakan acara yang diwakilkan:

<code class="javascript">$(document.body).trigger('wc_fragment_refresh');</code>
Salin selepas log masuk

atau

<code class="javascript">$(document.body).trigger('wc_fragments_refreshed');</code>
Salin selepas log masuk

Faedah

  • Elakkan muat semula yang tidak perlu.
  • Kemas kini kiraan troli secara dinamik dengan setiap penambahan atau pengalihan keluar item.
  • Tingkatkan pengalaman pengguna dengan memberikan maklum balas masa nyata.

Atas ialah kandungan terperinci Cara Ajaxify Mengira Item Troli Pengepala dalam WooCommerce: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!