Ausblenden des WooCommerce-Warenkorbs, wenn dieser leer ist, indem JavaScript in die Warteschlange gestellt wird

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!