Comment Ajaxifier le nombre d'articles du panier d'en-tête dans WooCommerce : un guide étape par étape

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

Introduction

La mise à jour du nombre d'articles du panier d'en-tête sans recharger la page améliore l'expérience utilisateur. Examinons le problème et sa solution.

Énoncé du problème

L'objectif est d'obtenir dynamiquement le nombre total d'articles du panier du serveur à l'aide de jQuery. Cependant, la mise en œuvre actuelle rencontre des difficultés lorsque plusieurs éléments sont ajoutés simultanément.

Solution

1. À l'aide du hook WooCommerce dédié

Au lieu d'un rechargement manuel, utilisez le hook d'action woocommerce_add_to_cart_fragments, qui est alimenté par Ajax :

• Intégrez le nombre de paniers en HTML avec un identifiant ou une classe unique, par ex.
  ...
  .
• Ajoutez le code suivant à votre fonctions.php :

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

2. Utiliser jQuery pour forcer l'actualisation

Si nécessaire, forcer l'actualisation du décompte à l'aide d'événements délégués :

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

ou

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

Avantages

• Évitez les rechargements inutiles.
• Mettez à jour dynamiquement le nombre de paniers à chaque ajout ou suppression d'article.
• Améliorez l'expérience utilisateur en fournissant des commentaires en temps réel.

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!