So ajaxifizieren Sie die Anzahl der Artikel im Header-Warenkorb in WooCommerce: Eine Schritt-für-Schritt-Anleitung

Anzahl der Artikel im Header-Warenkorb von Ajaxify in WooCommerce

Einführung

Das Aktualisieren der Anzahl der Artikel im Header-Warenkorb ohne Neuladen der Seite verbessert die Benutzererfahrung. Schauen wir uns das Problem und seine Lösung genauer an.

Problemstellung

Das Ziel besteht darin, mithilfe von jQuery dynamisch die Gesamtzahl der Warenkorbartikel vom Server abzurufen. Allerdings stößt die aktuelle Implementierung auf Schwierigkeiten, wenn mehrere Elemente gleichzeitig hinzugefügt werden.

Lösung

1. Verwenden Sie den dedizierten WooCommerce-Hook

Verwenden Sie anstelle des manuellen Neuladens den Aktions-Hook woocommerce_add_to_cart_fragments, der von Ajax unterstützt wird:

• Betten Sie die Warenkorbanzahl in HTML mit einer eindeutigen ID oder Klasse ein, z.B.
  ...
  .
• Fügen Sie den folgenden Code zu Ihrer Functions.php 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. Verwenden von jQuery zum Erzwingen der Aktualisierung

Bei Bedarf erzwingen Sie die Aktualisierung der Anzahl mithilfe delegierter Ereignisse:

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

oder

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

Vorteile

• Vermeiden Sie unnötiges Nachladen.
• Aktualisieren Sie die Warenkorbanzahl dynamisch mit jedem hinzugefügten oder entfernten Artikel.
• Verbessern Sie die Benutzererfahrung, indem Sie Echtzeit-Feedback geben.

Das obige ist der detaillierte Inhalt vonSo ajaxifizieren Sie die Anzahl der Artikel im Header-Warenkorb in WooCommerce: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!