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

Mary-Kate Olsen
Libérer: 2024-11-01 01:45:28
original
480 Les gens l'ont consulté

How to Refresh WooCommerce Header Cart Item Count Using 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>
Copier après la connexion

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

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!

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