Bagaimana untuk Mengemas kini Secara Dinamik Kiraan Item Troli Pengepala WooCommerce Menggunakan AJAX?

Item Troli Pengepala Ajaxify Dikira dalam WooCommerce

Mengenal pasti Keperluan

Dalam tema WordPress bersepadu WooCommerce, mengemas kini troli pengepala item dikira tanpa memuat semula halaman adalah cabaran biasa. jQuery menawarkan penyelesaian, tetapi persoalan timbul apabila item boleh ditambah dalam berbilang kuantiti.

Menggunakan AJAX untuk Mendapatkan Jumlah Kiraan

Untuk mendapatkan semula jumlah kiraan troli secara dinamik daripada PHP sesi menggunakan jQuery, fail reloadCart.php dicipta untuk menggemakan nilai:

<code class="php"><?php require('../../../wp-blog-header.php');
global $woocommerce;
echo $woocommerce->cart->get_cart_contents_count();
?></code>

Pelaksanaan AJAX

Walau bagaimanapun, cubaan untuk membuat panggilan AJAX ke fail ini menggunakan Fungsi get(), post(), atau ajax() jQuery telah tidak berjaya.

Pendekatan Yang Diperbaiki

Daripada bergantung pada muat semula, WooCommerce menawarkan woocommerce_add_to_cart_fragments yang berdedikasi cangkuk tindakan yang menyokong Ajax.

Penyepaduan HTML

Benamkan kiraan troli dalam pengepala dengan ID atau kelas unik:

<code class="php">$items_count = WC()->cart->get_cart_contents_count(); 
?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : ' '; ?></div>
<?php 

Kod PHP

Laksanakan kod berikut dalam fail function.php tema atau pemalam:

<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;
}

Ganti #mini-cart-count dengan .mini-cart- kira jika menggunakan kelas.

Segar Semula jQuery

Jika muat semula jQuery tambahan diperlukan:

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

atau

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

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Secara Dinamik Kiraan Item Troli Pengepala WooCommerce Menggunakan AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!