So fügen Sie eine „Mehr laden“-Schaltfläche zur Artikelliste hinzu

Bei Verwendung der ArtikellistenelementDie gleichzeitige Anzeige zu vieler Artikel kann Ihre Seite lang und unübersichtlich machen. Eine einfache Möglichkeit zur Verbesserung der Lesbarkeit besteht darin, einen MEHR LADEN Schaltfläche, die zunächst nur einen Teil der Liste anzeigt und beim Anklicken den vollständigen Inhalt einblendet.

Bevor du anfängst

Bevor Sie die Funktion „Mehr laden“ hinzufügen, stellen Sie sicher, dass Sie Folgendes haben:

• An Artikellistenelement bereits zur Seite hinzugefügt
• A Schaltflächenelement das als das verwendet werden wird MEHR LADEN Taste im nun erscheinenden Bestätigungsfenster nun wieder los.
• Das Element-ID beider Elemente

Sie benötigen diese IDs, um das Skript korrekt zu aktualisieren.

So fügen Sie eine „Mehr laden“-Schaltfläche hinzu

Führen Sie diese Schritte aus, um das Verhalten „Mehr laden“ zu erstellen.

Schritt 1: Fügen Sie ein Schaltflächenelement hinzu

Fügen Sie zunächst eine Schaltfläche unterhalb der Artikelliste hinzu.

• Ziehen Sie eine Schaltflächenelement unter Ihrem Artikelliste

• Ändern Sie den Schaltflächentext in: MEHR LADEN

• Gestalten Sie die Schaltfläche nach Bedarf.

Durch diese Schaltfläche wird die Erweiterungsaktion ausgelöst.

Schritt 2: Element-IDs kopieren

Sie müssen die Element-IDs von Folgendem kopieren:

• Das Artikellistenelement
• Das Schaltflächenelement

So kopieren Sie eine Element-ID:

• Klicken Sie mit der rechten Maustaste auf das Element.
• Klicken Sie auf Kopieren → Element-ID kopieren
• Speichern Sie die kopierte ID.

Sie werden die Beispiel-IDs im Code ersetzen.

Schritt 3: Ein benutzerdefiniertes Codeelement hinzufügen

Hinzufügen Benutzerdefiniertes Codeelement.

Fügen Sie anschließend den folgenden HTML-Code in das Element „Benutzerdefinierter Code“ ein.

document.addEventListener("DOMContentLoaded", function () {

 const target = document.querySelector('[data-id="gMwtAAckG5"]');

 const button = document.querySelector('.g4FCNC2MEY');

 if (target) {

   target.style.height = "400px";

 }

 if (button && target) {

   button.addEventListener("click", function () {

     target.style.height = "100%";

     button.style.display = "none";

   });

 }

});





[data-id="gMwtAAckG5"]{

 Überlauf: versteckt !important;

}

Schritt 4: Ersetzen Sie die Beispiel-Element-IDs

Im obigen Code müssen Sie die Beispiel-IDs durch Ihre eigenen ersetzen.

Ersetzen:

gMwtAAckG5

mit:

• Ihre Element-ID der Artikelliste

Ersetzen:

g4FCNC2MEY

mit:

• Ihre Schaltflächenelement-ID

So funktioniert die Funktion „Mehr laden“

Nach dem Hinzufügen des Codes:

1. Die Artikelliste zeigt anfänglich nur 400px Höhe
2. Zusätzliche Artikel werden ausgeblendet.
3. Wenn Benutzer klicken MEHR LADEN:

• Die vollständige Liste wird sichtbar
• Der Knopf verschwindet.

Dadurch entsteht eine einfache und übersichtliche Interaktion zum Erweitern.

Sie können steuern, wie viele Artikel vor dem Klicken angezeigt werden. MEHR LADEN.

Suchen Sie diese Zeile im Code:

target.style.height = “400px”;

Ändern 400px auf einen anderen Wert, zum Beispiel:

• 300px → weniger Artikel anzeigen
• 500px → Weitere Artikel anzeigen
• 600px → noch mehr anzeigen

Passen Sie diesen Wert an Ihr Layout an.