Maison > développement back-end > tutoriel php > Comment mettre à jour dynamiquement le nombre d'articles du panier d'en-tête WooCommerce à l'aide d'Ajax ?

Comment mettre à jour dynamiquement le nombre d'articles du panier d'en-tête WooCommerce à l'aide d'Ajax ?

Mary-Kate Olsen
Libérer: 2024-10-29 18:32:02
original
792 Les gens l'ont consulté

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

Nombre d'articles du panier d'en-tête Ajaxify dans Woocommerce

Aperçu :

Dans Woocommerce, mise à jour du nombre d'articles du panier d'en-tête lors de l'ajout /La suppression d'éléments peut être réalisée sans rechargement de page à l'aide d'Ajax.

Solution :

1. Balisage HTML pour le nombre de paniers :

Dans le header.php de votre thème, ajoutez le code suivant pour intégrer le nombre de paniers dans une balise HTML avec un identifiant ou une classe unique :

<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>
Copier après la connexion

2. Implémentation du code :

Ensuite, ajoutez ce code à votre fichier function.php ou à n'importe quel fichier de plugin :

<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>
Copier après la connexion

Ce hook met à jour l'élément "mini-cart-count" avec le nombre mis à jour après avoir ajouté des articles au panier.

3. Déclencheur jQuery facultatif :

Si vous souhaitez forcer la mise à jour du décompte via jQuery, utilisez l'un de ces événements délégués :

<code class="javascript">$(document.body).trigger('wc_fragment_refresh');</code>
Copier après la connexion
<code class="javascript">$(document.body).trigger('wc_fragments_refreshed');</code>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal