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!