Comment mettre à jour dynamiquement le nombre d'articles du panier d'en-tête WooCommerce à l'aide d'AJAX ?

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

Identification du besoin

Dans les thèmes WordPress intégrés à WooCommerce, mise à jour du panier d'en-tête le comptage des éléments sans recharger la page est un défi courant. jQuery propose une solution, mais des questions se posent lorsque des articles peuvent être ajoutés en plusieurs quantités.

Utiliser AJAX pour récupérer le nombre total

Pour récupérer dynamiquement le nombre total de paniers à partir de PHP sessions utilisant jQuery, un fichier reloadCart.php est créé pour faire écho à la valeur :

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

Implémentation AJAX

Cependant, les tentatives d'appels AJAX vers ce fichier en utilisant Les fonctions get(), post() ou ajax() de jQuery ont échoué.

Approche améliorée

Au lieu de s'appuyer sur un rechargement, WooCommerce propose un woocommerce_add_to_cart_fragments dédié crochet d'action qui prend en charge Ajax.

Intégration HTML

Intégrer le nombre de paniers dans l'en-tête avec un identifiant ou une classe unique :

<code class="php">$items_count = WC()->cart->get_cart_contents_count(); 
?>
    <div id="mini-cart-count"><?php echo $items_count ? $items_count : '&amp;nbsp;'; ?></div>
<?php

Code PHP

Implémentez le code suivant dans le fichier function.php du thème ou un plugin :

<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 : '&amp;nbsp;'; ?></div>
    <?php
        $fragments['#mini-cart-count'] = ob_get_clean();
    return $fragments;
}</code>

Remplacez #mini-cart-count par .mini-cart- comptez si vous utilisez une classe.

JQuery Refresh

Si une actualisation jQuery supplémentaire est requise :

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

ou

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

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!