Masquer le panier WooCommerce lorsqu'il est vide en mettant JavaScript en file d'attente

WooCommerce est un plugin de commerce électronique puissant et open source conçu pour WordPress qui transforme votre site Web en une boutique en ligne entièrement fonctionnelle. Son interface conviviale et sa vaste bibliothèque de thèmes et de plugins personnalisables en font un choix idéal pour les entreprises de toutes tailles, que vous lanciez une petite boutique ou une entreprise de vente au détail à grande échelle.

Un défi courant auquel les développeurs sont confrontés est de masquer l'icône du panier lorsque le panier est vide. Il est surprenant de voir à quelle fréquence ce problème revient, étant donné sa simplicité, mais voici pourquoi cela se produit :

WooCommerce utilise des données dynamiques pour contrôler l'affichage de l'icône du panier. S'il y a des articles dans le panier, WooCommerce met à jour l'élément du panier de manière dynamique à l'aide d'un attribut de données, tel que data-cart-items-count. Cependant, cette mise à jour dynamique crée un problème de timing. Par exemple, vous pouvez ajouter une règle CSS telle que :

[data-cart-items-count="0"] {
affichage : aucun ;
>

Mais l'icône du panier apparaît encore brièvement avant la mise à jour de l'attribut de données, ce qui entraîne un scintillement indésirable.

La solution : JavaScript !

Pour résoudre ce problème, nous avons besoin de JavaScript pour contrôler dynamiquement la visibilité du panier. Puisque WordPress s'appuie sur la mise en file d'attente pour charger correctement les scripts, voici comment vous pouvez implémenter la solution :

Étape 1 : Mettez votre JavaScript en file d’attente

Dans le fichier function.php de votre thème, ajoutez le code suivant pour mettre en file d'attente votre fichier JavaScript personnalisé :

function enqueue_custom_script() {
    wp_enqueue_script(
        'custom-cart-script', // Handle name
        get_stylesheet_directory_uri() . '/path/to/js/script.js', // Path to the JS file
        array('jquery'), // Dependencies
        '1.0.0', // Version
        true // Load in the footer
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Assurez-vous que le chemin du fichier correspond à la structure de votre thème.

Étape 2 : ajouter le code JavaScript

Dans le fichier JavaScript que vous venez de mettre en file d'attente, ajoutez le code suivant :

document.addEventListener('DOMContentLoaded', function () {
    const miniCart = document.querySelector('.wc-block-mini-cart'); // Update selector as needed

    if (miniCart) {
        // Initially hide the mini-cart
        miniCart.style.display = 'none';

        const updateVisibility = () => {
            const itemCount = miniCart.getAttribute('data-cart-items-count');
            miniCart.style.display = itemCount === '0' ? 'none' : 'block';
        };

        // Run the visibility check on page load
        updateVisibility();

        // Monitor changes to the mini-cart for dynamic updates
        const observer = new MutationObserver(updateVisibility);
        observer.observe(miniCart, { attributes: true, attributeFilter: ['data-cart-items-count'] });
    }
});

Comment ça marche

• Le script attend que le DOM se charge complètement.
• Il sélectionne l'icône du panier (mettez à jour le sélecteur pour qu'il corresponde à l'élément du panier de votre thème).
• Au départ, le panier est masqué.
• La fonction updateVisibility vérifie l'attribut data-cart-items-count et bascule la visibilité du panier.
• Un MutationObserver surveille les changements d'attributs pour mettre à jour dynamiquement le panier si nécessaire.
• Avec cette configuration, l'icône de votre panier n'apparaîtra que lorsqu'il y a au moins un article dans le panier, éliminant ainsi le problème de scintillement causé par les mises à jour retardées des données.

Faites-moi savoir si cela vous a aidé ! J'aimerais également savoir quel type de sites WooCommerce vous créez et comment vous utilisez ce fantastique plugin.

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!