Heim  >  Artikel  >  Backend-Entwicklung  >  Wie aktualisiere ich die Artikelanzahl im WooCommerce-Header-Warenkorb mithilfe von Ajax dynamisch?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-29 18:32:02681Durchsuche

How to Dynamically Update WooCommerce Header Cart Item Count Using Ajax?

Ajaxify Header-Warenkorb-Artikelanzahl in Woocommerce

Übersicht:

In Woocommerce wird die Artikelanzahl im Header-Warenkorb beim Hinzufügen aktualisiert /Entfernen von Elementen kann ohne Neuladen der Seite mit Ajax erreicht werden.

Lösung:

1. HTML-Markup für die Warenkorbanzahl:

Fügen Sie in der header.php Ihres Themes den folgenden Code hinzu, um die Warenkorbanzahl in ein HTML-Tag mit einer eindeutigen ID oder Klasse einzubetten:

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

2. Code-Implementierung:

Fügen Sie als Nächstes diesen Code zu Ihrer Datei „functions.php“ oder einer beliebigen Plugin-Datei 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>

Dieser Hook aktualisiert das Element „mini-cart-count“ mit die aktualisierte Anzahl nach dem Hinzufügen von Artikeln zum Warenkorb.

3. Optionaler jQuery-Trigger:

Wenn Sie die Zählaktualisierung über jQuery erzwingen möchten, verwenden Sie eines dieser delegierten Ereignisse:

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn