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

Ajaxify Header Cart Items Count dans WooCommerce

Dans WooCommerce, afficher le nombre d'articles dans le panier dans l'en-tête est essentiel pour la navigation de l'utilisateur. Lorsque ces articles changent (ajoutés ou supprimés), il est souhaitable de mettre à jour le nombre de paniers sans recharger la page en utilisant JavaScript (en particulier Ajax).

Obtenir le nombre de paniers à partir de PHP en utilisant Ajax

Pour obtenir le nombre actuel de paniers de PHP en utilisant Ajax, nous devons créer un fichier dédié, tel que reloadCart.php, qui fait écho à ce nombre.

<code class="php"><?php
require('../../../wp-blog-header.php');
global $woocommerce;
echo $woocommerce->cart->get_cart_contents_count();
?></code>

Ensuite, dans notre code JavaScript, nous pouvons récupérer ce nombre en utilisant la fonction $.get() :

<code class="js">$(".ajax_add_to_cart").click(function () {
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        console.log("Cart Count: " + data);
    });
});</code>

Cependant, utiliser $.get() à cette fin n'est pas l'approche recommandée dans WooCommerce.

Utiliser le crochet d'action woocommerce_add_to_cart_fragments

WooCommerce fournit un crochet d'action woocommerce_add_to_cart_fragments dédié spécialement conçu pour mettre à jour le nombre de contenus du panier dans Ajax.

1. Enregistrez le crochet d'action :

   • Dans le fichier function.php de votre thème, ajoutez le code suivant :

   <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. Mettez à jour le code HTML pour actualiser :

   • Dans votre fichier header.php, mettez à jour le HTML qui affiche le nombre de paniers pour utiliser l'ID mini-cart-count attribué dans le code ci-dessus :

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

   Copier après la connexion

Maintenant, lorsque vous cliquez sur le bouton ajax_add_to_cart, le hook d'action woocommerce_add_to_cart_fragments mettra automatiquement à jour l'élément HTML #mini-cart-count avec le nombre actualisé.

Informations supplémentaires

• La méthode WC()->cart->get_cart_contents_count() remplace la méthode obsolète $woocommerce->cart->get_cart_contents_count().

• Pour forcer l'actualisation du décompte à l'aide de jQuery, utilisez la méthode Événements délégués wc_fragment_refresh ou wc_fragments_refreshed :

  <code class="js">$(document.body).trigger('wc_fragment_refresh'); // or 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!