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

source:php.cn
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