Zur Übersicht

Elementor Loop Grid komplett ausblenden, wenn keine Ergebnisse vorhanden sind

Elementor: Kompletten Bereich ausblenden, wenn Loop Grid keine Ergebnisse hat

Wenn ein Elementor Loop Grid keine Ergebnisse liefert, sollen häufig nicht nur das leere Grid, sondern auch alle dazugehörigen Inhalte verschwinden – zum Beispiel Überschriften, Einleitungstexte, Hinweise oder Abstände.

Elementor bietet dafür in den Dynamic Conditions keine passende Abfrage auf die Anzahl der Query-Ergebnisse. Allerdings gibt Elementor bei einem Loop Grid ohne Treffer ein Element mit der Klasse e-loop-nothing-found-message aus. Dieses Element kann per JavaScript erkannt werden.

Aufbau in Elementor

Alle Inhalte, die nur bei vorhandenen Ergebnissen sichtbar sein sollen, kommen gemeinsam in einen übergeordneten Container:

Container → CSS-Klasse: i2-loop-content
├── Überschrift
├── Einleitungstext
├── weitere Inhalte
└── Loop Grid

Dem äußeren Container unter Erweitert → CSS-Klassen folgende Klasse geben:

i2-loop-content

JavaScript

<script>
(function () {

    function hideEmptyLoopContent() {
        document.querySelectorAll('.i2-loop-content').forEach(function (block) {

            const nothingFound =
                block.querySelector('.e-loop-nothing-found-message');

            if (nothingFound) {
                block.style.display = 'none';
            }

        });
    }

    // Direkt prüfen
    hideEmptyLoopContent();

    // Elementor kann das Loop Grid nachträglich ins DOM schreiben
    const observer = new MutationObserver(function () {
        hideEmptyLoopContent();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Abschließende Prüfung und Observer beenden
    setTimeout(function () {
        hideEmptyLoopContent();
        observer.disconnect();
    }, 3000);

})();
</script>

Ergebnis

Sobald Elementor für das enthaltene Loop Grid keine Ergebnisse findet, wird der gesamte übergeordnete Container ausgeblendet. Damit verschwinden automatisch auch alle Inhalte, die nur zusammen mit den Ergebnissen sinnvoll sind.

Das können zum Beispiel sein:

Überschriften
Einleitungstexte
Hinweise und Erklärungen
Buttons
Trennlinien
Abstände des Containers
das leere Loop Grid selbst

Hinweise

Die Lösung ist nicht an eine bestimmte Query-ID oder einen bestimmten Post Type gebunden.
Die Klasse i2-loop-content kann auf derselben Seite mehrfach verwendet werden.
Jeder Container reagiert nur auf das Loop Grid, das sich innerhalb dieses Containers befindet.
Auch wenn in Elementor kein eigener „Nothing found“-Text eingetragen wurde, kann e-loop-nothing-found-message im HTML vorhanden sein.
Der MutationObserver berücksichtigt, dass Elementor das Loop Grid unter Umständen erst nach dem ersten Laden des DOM vollständig rendert.