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

Susan Sarandon
Libérer: 2024-10-30 11:29:26
original
988 Les gens l'ont consulté

How to Ajaxify Header Cart Items Count in WooCommerce: A Step-by-Step Guide

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

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

ou

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

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!

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!