WooCommerce ist ein leistungsstarkes Open-Source-E-Commerce-Plugin für WordPress, das Ihre Website in einen voll funktionsf?higen Online-Shop verwandelt. Seine benutzerfreundliche Oberfl?che und die umfangreiche Bibliothek anpassbarer Themes und Plugins machen es zur idealen Wahl für Unternehmen jeder Gr??e, egal ob Sie eine kleine Boutique oder einen gro?en Einzelhandelsbetrieb er?ffnen.

Eine h?ufige Herausforderung für Entwickler besteht darin, das Warenkorbsymbol auszublenden, wenn der Warenkorb leer ist. Angesichts seiner Einfachheit ist es überraschend, wie h?ufig dieses Problem auftritt, aber hier erfahren Sie, warum es auftritt:

WooCommerce verwendet dynamische Daten, um zu steuern, wie das Warenkorbsymbol angezeigt wird. Wenn sich Artikel im Warenkorb befinden, aktualisiert WooCommerce das Warenkorbelement dynamisch mithilfe eines Datenattributs, z. B. data-cart-items-count. Dieses dynamische Update führt jedoch zu einem Zeitproblem. Sie k?nnten beispielsweise eine CSS-Regel hinzufügen wie:

[data-cart-items-count="0"] {
Anzeige: keine;
}

Aber das Warenkorbsymbol erscheint immer noch kurz, bevor das Datenattribut aktualisiert wird, was zu einem unerwünschten Flackern führt.

Die L?sung: JavaScript!

Um dieses Problem zu l?sen, ben?tigen wir JavaScript, um die Sichtbarkeit des Warenkorbs dynamisch zu steuern. Da WordPress zum ordnungsgem??en Laden von Skripten auf die Warteschlange angewiesen ist, k?nnen Sie die L?sung wie folgt implementieren:

Schritt 1: Stellen Sie Ihr JavaScript in die Warteschlange

Fügen Sie in der Datei ?functions.php“ Ihres Themes den folgenden Code hinzu, um Ihre benutzerdefinierte JavaScript-Datei in die Warteschlange zu stellen:

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');

Stellen Sie sicher, dass der Dateipfad mit der Struktur Ihres Themes übereinstimmt.

Schritt 2: Fügen Sie den JavaScript-Code hinzu

Fügen Sie in der JavaScript-Datei, die Sie gerade in die Warteschlange gestellt haben, den folgenden Code hinzu:

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'] });
    }
});

Wie es funktioniert

• Das Skript wartet darauf, dass das DOM vollst?ndig geladen ist.
• Es w?hlt das Warenkorbsymbol aus (aktualisieren Sie die Auswahl so, dass sie mit dem Warenkorbelement Ihres Themas übereinstimmt).
• Der Warenkorb ist zun?chst ausgeblendet.
• Die updateVisibility-Funktion überprüft das Attribut data-cart-items-count und schaltet die Sichtbarkeit des Warenkorbs um.
• Ein MutationObserver überwacht Attribut?nderungen, um den Warenkorb bei Bedarf dynamisch zu aktualisieren.
• Mit dieser Einrichtung wird Ihr Warenkorbsymbol nur angezeigt, wenn sich mindestens ein Artikel im Warenkorb befindet, wodurch das durch verz?gerte Datenaktualisierungen verursachte Flimmerproblem vermieden wird.

Lassen Sie mich wissen, ob Ihnen das geholfen hat! Ich würde auch gerne h?ren, welche Art von WooCommerce-Websites Sie erstellen und wie Sie dieses fantastische Plugin verwenden.

Das obige ist der detaillierte Inhalt vonAusblenden des WooCommerce-Warenkorbs, wenn dieser leer ist, indem JavaScript in die Warteschlange gestellt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!