Bagaimana untuk Menyegarkan Kiraan Barang Troli Pengepala WooCommerce Menggunakan 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>

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>

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!