Infinite Scroll mit dem b4um Generator

Mit dem Infinite-Scroll-Generator können weitere Datensätze automatisch geladen werden, sobald der Benutzer sich dem Ende der aktuellen Liste nähert.

Eine klassische Seitennavigation mit „Weiter“ und „Zurück“ ist dadurch nicht notwendig. Neue Einträge werden automatisch an die bestehende Liste angehängt.

Voraussetzung

Für dieses Beispiel verwenden wir ein bereits vorhandenes Product-Model mit einem passenden Controller und einer Index-Seite.

Infinite Scroll wird auf eine bestehende Ressource angewendet.

Infinite Scroll hinzufügen

Im Terminal führen wir aus:

bin/rails g b4um:infinite_scroll Product

Der b4um Generator richtet anschließend die benötigten Komponenten automatisch ein.

Dazu gehören:

serverseitige Pagination
der Stimulus-Controller für Infinite Scroll
die Anpassung des ProductsController
die Anpassung der Index-Seite
das automatische Laden weiterer Datensätze

Anzahl der Einträge festlegen

Mit --per-page kann festgelegt werden, wie viele Datensätze jeweils geladen werden sollen.

Zum Beispiel:

bin/rails g b4um:infinite_scroll Product --per-page=5

Damit werden zunächst fünf Produkte geladen.

Sobald sich der Benutzer dem Ende der Liste nähert, werden automatisch die nächsten fünf Produkte geladen und an die vorhandenen Einträge angehängt.

Dieser Vorgang wird wiederholt, bis keine weiteren Datensätze vorhanden sind.

Was wird im Controller erzeugt?

Der Generator ergänzt die Index-Action um die b4um Pagination.

Das Ergebnis sieht beispielsweise so aus:

def index
  @products, @pagination = b4um_paginate(
    Product.all,
    per_page: 5
  )
end

@products enthält die Datensätze der aktuellen Seite.

@pagination enthält die Informationen darüber, ob eine weitere Seite vorhanden ist.

Die technische Pagination übernimmt dabei das Nachladen der Datensätze. Eine sichtbare Seitennavigation wird für Infinite Scroll nicht benötigt.

Infinite Scroll in der View

Der Generator ergänzt die Index-Seite automatisch um einen sogenannten Sentinel.

Beispielsweise:

<div
  data-controller="infinite-scroll"
  data-infinite-scroll-container-value="products"
  data-infinite-scroll-next-url-value="<%= url_for(request.query_parameters.merge(page: @pagination.next_page)) if @pagination.next_page %>"
></div>

Dieses Element befindet sich unterhalb der Produktliste.

Der Stimulus-Controller überwacht seine Position. Nähert sich das Element dem sichtbaren Bereich des Browsers, wird automatisch die nächste Seite geladen.

Die neuen Datensätze werden anschließend an die bestehende Liste angehängt.

Automatisches Vorladen

Infinite Scroll wartet nicht erst darauf, dass der Benutzer exakt das Ende der Seite erreicht.

Die nächsten Datensätze werden bereits geladen, wenn sich der Sentinel dem sichtbaren Bereich nähert.

Dadurch erscheinen weitere Einträge normalerweise ohne sichtbare Ladeunterbrechung.

Auch beim direkten Aufruf der Seite wird geprüft, ob weitere Datensätze benötigt werden. Das ist beispielsweise bei großen Browserfenstern wichtig.

Infinite Scroll zusammen mit der Suche

Infinite Scroll kann auch mit der b4um Suche kombiniert werden.

Wenn die Suche bereits eingerichtet wurde, kann anschließend Infinite Scroll ergänzt werden:

bin/rails g b4um:infinite_scroll Product --per-page=5

Der Controller kann danach beispielsweise so aussehen:

def index
  @products, @pagination = b4um_paginate(
    b4um_search(
      Product.all,
      params[:q]
    ),
    per_page: 5
  )
end

Dabei wird zuerst die Suche ausgeführt und anschließend das Suchergebnis paginiert.

Wird beispielsweise im Suchfeld nach

mac

gesucht, zeigt die Produktseite nur die passenden Treffer an.

In der Adresszeile bleibt die normale Suchanfrage sichtbar, zum Beispiel:

/products?q=mac&commit=Search

Sind mehr passende Treffer vorhanden als mit --per-page auf einmal angezeigt werden, lädt Infinite Scroll die weiteren Suchergebnisse automatisch nach.

Die dafür benötigten weiteren Seiten werden im Hintergrund geladen. Der Benutzer muss keine Seitennummer auswählen und die Browser-Adresse wird beim automatischen Nachladen nicht auf page=2, page=3 usw. geändert.

Der Suchbegriff bleibt beim Nachladen erhalten. Dadurch werden weiterhin nur Produkte geladen, die zur aktuellen Suche gehören.

Beispiel

Angenommen, es existieren 35 Produkte und Infinite Scroll wurde mit

bin/rails g b4um:infinite_scroll Product --per-page=5

eingerichtet.

Beim Aufruf von

/products

werden zunächst fünf Produkte angezeigt.

Beim Scrollen werden automatisch weitere Produkte geladen und an die vorhandene Liste angehängt.

Sind keine weiteren Produkte vorhanden, beendet Infinite Scroll das Nachladen automatisch.

Für den Benutzer entsteht dadurch eine durchgehende Produktliste ohne sichtbaren Seitenwechsel.

Generator erneut ausführen

Der Infinite-Scroll-Generator ist so ausgelegt, dass er nicht bei jedem Aufruf dieselben Bestandteile erneut einfügt.

Dadurch kann der Generator auch in einer bereits vorbereiteten b4um-Anwendung verwendet werden.

Hilfe anzeigen

Eine Übersicht über die verfügbaren b4um Generatoren erhältst du mit:

bin/rails g b4um:help

Dort findest du auch die Informationen zum Infinite-Scroll-Generator.

Zusammenfassung

Mit

bin/rails g b4um:infinite_scroll Product

kann eine bestehende Ressource um Infinite Scroll erweitert werden.

Mit

bin/rails g b4um:infinite_scroll Product --per-page=5

bestimmst du zusätzlich, wie viele Datensätze pro Ladevorgang geladen werden.

Der Generator übernimmt die serverseitige Pagination, den Stimulus-Controller und die notwendigen Anpassungen an Controller und Index-View.

Infinite Scroll lässt sich außerdem mit der b4um Suche kombinieren, sodass auch gefilterte Ergebnisse automatisch nachgeladen werden, ohne dass der Benutzer zwischen einzelnen Seiten wechseln muss.

Meld dich an und schreibe ein Kommentar