Bagaimana untuk Menyegarkan Kiraan Barang Troli Pengepala WooCommerce Menggunakan Ajax?

Mary-Kate Olsen
Lepaskan: 2024-11-01 01:45:28
asal
479 orang telah melayarinya

How to Refresh WooCommerce Header Cart Item Count Using Ajax?

Item Troli Pengepala Ajaxify Dikira dalam WooCommerce

Dalam WooCommerce, memaparkan bilangan item dalam troli dalam pengepala adalah penting untuk navigasi pengguna. Apabila item ini berubah (ditambah atau dialih keluar), adalah wajar untuk mengemas kini kiraan troli tanpa memuat semula halaman menggunakan JavaScript (khususnya Ajax).

Mendapatkan Kiraan Troli daripada PHP Menggunakan Ajax

Untuk mendapatkan kiraan troli semasa daripada PHP menggunakan Ajax, kami perlu mencipta fail khusus, seperti reloadCart.php, yang menggemakan kiraan ini.

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

Seterusnya, dalam kod JavaScript kami, kami boleh mendapatkan kiraan ini menggunakan fungsi $.get():

<code class="js">$(".ajax_add_to_cart").click(function () {
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        console.log("Cart Count: " + data);
    });
});</code>
Salin selepas log masuk

Walau bagaimanapun, menggunakan $.get() untuk tujuan ini bukanlah pendekatan yang disyorkan dalam WooCommerce.

Menggunakan Cangkuk Tindakan woocommerce_add_to_cart_fragments

WooCommerce menyediakan cangkuk tindakan woocommerce_add_to_cart_fragments khusus yang direka khusus untuk mengemas kini kiraan kandungan troli dalam Ajax.

  1. Daftarkan Action Hook:

    • Dalam fail functions.php tema anda, tambahkan kod berikut:
    <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. Kemas kini HTML untuk Muat Semula:

    • Dalam fail header.php anda, kemas kini HTML yang memaparkan kiraan troli untuk menggunakan ID kiraan troli mini yang diberikan dalam kod di atas:
    <code class="html"><div id="mini-cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></div></code>
    Salin selepas log masuk

Kini, apabila butang ajax_add_to_cart diklik, cangkuk tindakan woocommerce_add_to_cart_fragments akan mengemas kini elemen HTML #mini-cart-count secara automatik dengan kiraan yang dimuat semula.

Maklumat Tambahan

  • Kaedah WC()->cart->get_cart_contents_count() menggantikan $woocommerce->cart->get_cart_contents_count().
  • Untuk memuatkan semula kiraan secara paksa menggunakan jQuery, gunakan wc_fragment_refresh atau wc_fragments_refreshed acara yang diwakilkan:

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

Atas ialah kandungan terperinci Bagaimana untuk Menyegarkan Kiraan Barang Troli Pengepala WooCommerce Menggunakan Ajax?. 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