Wie kann ich die Anzahl der Artikel im Header-Warenkorb in WooCommerce ajaxifizieren?

Ajaxify Header Cart Items Count in WooCommerce

Challenge

In einer benutzerdefinierten WooCommerce-Integration Im WordPress-Theme trat ein Problem auf, bei dem eine Anzeige für die Anzahl der Artikel im Warenkorb nach dem Hinzufügen von Artikeln falsche Werte anzeigte. Der Täter legte eine bestimmte Menge an Artikeln in den Warenkorb, was dazu führte, dass sich der Indikator nur um eins erhöhte.

Lösung

Um dieses Problem zu beheben, können wir die spezielle Funktion von WooCommerce nutzen woocommerce_add_to_cart_fragments Aktions-Hook, der Ajax-Unterstützung für die Aktualisierung der Anzahl der Warenkorbartikel bietet.

Implementierung

1. HTML und ID/Klasse

In der Datei header.php des Themes definieren wir das HTML-Element, das die Warenkorbanzahl anzeigt. Für ein einfaches Targeting ist es wichtig, eine eindeutige ID oder Klasse zuzuweisen:

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

2. PHP-Code

Als nächstes fügen wir der Datei „functions.php“ eine Funktion hinzu, die den Hook verwendet, um den Inhalt der Warenkorbanzahl dynamisch zu aktualisieren:

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

3. Ajax-Update

Wenn Sie zusätzliche Kontrolle mit jQuery benötigen, sollten Sie die Verwendung der Ereignisse wc_fragment_refresh oder wc_fragments_refreshed in Betracht ziehen:

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

oder

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

Durch Implementierung dieser Änderungen , die Anzahl der Artikel im Warenkorb zeigt genau die Anzahl der Artikel im Warenkorb an, auch wenn bestimmte Produktmengen hinzugefügt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich die Anzahl der Artikel im Header-Warenkorb in WooCommerce ajaxifizieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!