„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Wie aktualisiere ich die Anzahl der Artikel im WooCommerce-Header-Warenkorb mithilfe von AJAX dynamisch?

Wie aktualisiere ich die Anzahl der Artikel im WooCommerce-Header-Warenkorb mithilfe von AJAX dynamisch?

Veröffentlicht am 04.11.2024
Durchsuche:599

How to Dynamically Update WooCommerce Header Cart Items Count Using AJAX?

Ajaxify Header Cart Items Count in WooCommerce

Identifizieren des Bedarfs

In WooCommerce integrierte WordPress-Themes, Aktualisierung des Header Cart Elemente zu zählen, ohne die Seite neu zu laden, ist eine häufige Herausforderung. jQuery bietet eine Lösung, es stellen sich jedoch Fragen, wenn Artikel in mehreren Mengen hinzugefügt werden können.

Verwendung von AJAX zum Abrufen der Gesamtanzahl

Um die Gesamtanzahl des Warenkorbs dynamisch aus PHP abzurufen Sitzungen mit jQuery wird eine reloadCart.php-Datei erstellt, um den Wert wiederzugeben:

cart->get_cart_contents_count();
?>

AJAX-Implementierung

Versuche, AJAX-Aufrufe an diese Datei mithilfe der jQuery-Funktionen get(), post() oder ajax() durchzuführen, waren jedoch erfolglos .

Verbesserter Ansatz

Anstatt sich auf ein Neuladen zu verlassen, bietet WooCommerce einen speziellen Aktions-Hook woocommerce_add_to_cart_fragments, der Ajax unterstützt.

HTML-Integration

Betten Sie die Warenkorbanzahl mit einer eindeutigen ID oder Klasse in den Header ein:

$items_count = WC()->cart->get_cart_contents_count(); 
?>
    

PHP-Code

Implementieren Sie den folgenden Code in der function.php-Datei des Themes oder einem Plugin:

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();
    ?>
    

Ersetzen Sie #mini-cart-count durch .mini-cart-count, wenn Sie eine Klasse verwenden.

jQuery Refresh

Bei zusätzlicher jQuery-Aktualisierung ist erforderlich:

$(document.body).trigger('wc_fragment_refresh');

oder

$(document.body).trigger('wc_fragments_refreshed');
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3