Comment Ajaxifier le nombre d'articles du panier d'en-tête dans WooCommerce ?

Ajaxify Header Cart Items Count in WooCommerce

Défi

Dans un environnement personnalisé intégré à WooCommerce Thème WordPress, un problème est survenu lorsqu'un indicateur de nombre d'articles du panier affichait des valeurs incorrectes après l'ajout d'articles. Le coupable était l'ajout d'une quantité spécifique d'articles au panier, ce qui faisait que l'indicateur n'incrémentait que d'un.

Solution

Pour résoudre ce problème, nous pouvons tirer parti de la solution dédiée de WooCommerce. Crochet d'action woocommerce_add_to_cart_fragments, qui fournit la prise en charge Ajax pour la mise à jour du nombre d'articles du panier.

Mise en œuvre

1. HTML et ID/Class

Dans le fichier header.php du thème, nous définissons l'élément HTML qui affichera le nombre de paniers. Il est important d'attribuer un identifiant ou une classe unique pour un ciblage facile :

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

2. Code PHP

Ensuite, nous ajoutons une fonction au fichier function.php qui utilise le hook pour mettre à jour dynamiquement le contenu du nombre de paniers :

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

3. Mise à jour Ajax

Si vous avez besoin d'un contrôle supplémentaire avec jQuery, pensez à utiliser les événements wc_fragment_refresh ou wc_fragments_refreshed :

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

ou

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

En mettant en œuvre ces modifications , l'indicateur du nombre d'articles du panier reflétera avec précision le nombre d'articles dans le panier, même lors de l'ajout de quantités spécifiques de produits.

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!