Wie aktualisiere ich die Artikelanzahl im WooCommerce-Header-Warenkorb mithilfe von Ajax?

Ajaxify Header Cart Items Count in WooCommerce

In WooCommerce ist die Anzeige der Anzahl der Artikel im Warenkorb in der Kopfzeile für die Benutzernavigation von entscheidender Bedeutung. Wenn sich diese Elemente ändern (hinzugefügt oder entfernt), ist es wünschenswert, die Warenkorbanzahl zu aktualisieren, ohne die Seite mit JavaScript (insbesondere Ajax) neu zu laden.

Erhalten der Warenkorbanzahl von PHP mit Ajax

Zu erhalten Um die aktuelle Warenkorbanzahl von PHP mithilfe von Ajax zu ermitteln, müssen wir eine spezielle Datei erstellen, z. B. reloadCart.php, die diese Anzahl wiedergibt.

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

Als nächstes können wir diese Anzahl in unserem JavaScript-Code mit abrufen die Funktion $.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>

Die Verwendung von $.get() für diesen Zweck ist jedoch nicht der empfohlene Ansatz in WooCommerce.

Verwendung des Aktions-Hooks woocommerce_add_to_cart_fragments

WooCommerce bietet einen speziellen Aktions-Hook woocommerce_add_to_cart_fragments, der speziell für die Aktualisierung der Anzahl der Warenkorbinhalte in Ajax entwickelt wurde.

1. Aktions-Hook registrieren:

   • Fügen Sie in der Datei „functions.php“ Ihres Themes den folgenden Code hinzu:

   <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. Aktualisieren Sie den HTML-Code auf „Aktualisieren“:

   • Aktualisieren Sie in Ihrer header.php-Datei den HTML-Code, der die Warenkorbanzahl anzeigt, um die im obigen Code zugewiesene Mini-Cart-Count-ID zu verwenden:

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

Wenn jetzt auf die Schaltfläche ajax_add_to_cart geklickt wird, aktualisiert der Aktions-Hook woocommerce_add_to_cart_fragments automatisch das HTML-Element #mini-cart-count mit der aktualisierten Anzahl.

Zusätzliche Informationen

• Die Methode WC()->cart->get_cart_contents_count() ersetzt die veraltete Methode $woocommerce->cart->get_cart_contents_count().

• Um die Aktualisierung der Anzahl mithilfe von jQuery zu erzwingen, verwenden Sie die wc_fragment_refresh oder wc_fragments_refreshed delegierte Ereignisse:

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

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich die Artikelanzahl im WooCommerce-Header-Warenkorb mithilfe von Ajax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!