Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Cara Ajaxify Mengira Item Troli Pengepala dalam WooCommerce: Panduan Langkah demi Langkah

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

Susan Sarandon
Susan Sarandonasal
2024-10-30 11:29:26988semak imbas

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>

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>

atau

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

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!

Kenyataan:
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