Wie ersetzt man in BigCommerce die Paginierung durch unendliches Scrollen?

This entry was posted in BigCommerce and tagged on by .

Wenn Sie schon einmal eine Kategorieseite in BigCommerce erstellt haben, kennen Sie die Standardkonfiguration. Die Produkte werden in einem Raster angezeigt, und unten befindet sich eine Reihe mit Seitenzahlen. Klicken Sie auf „2“, warten Sie, bis die Seite neu geladen ist, klicken Sie auf „3“ und warten Sie erneut. Das funktioniert zwar, entspricht aber nicht mehr unbedingt einem modernen Einkaufserlebnis. Viele Kunden wünschen sich stattdessen „Infinite Scroll“, bei dem neue Produkte beim Herunterscrollen nachgeladen werden. Bei einem Cornerstone-Theme ist das einfacher umzusetzen, als es klingt.

Wie funktioniert das?

Die Paginierung von BigCommerce bietet dir bereits alles, was du brauchst. Jede Seitenzahl ist lediglich ein Link mit einem href, zum Beispiel /shop-all/?page=2. Anstatt also eine komplexe API-Integration zu entwickeln, rufst du diese Seite im Hintergrund ab, extrahierst das Produktraster daraus und fügst diese Produkte zum aktuellen Raster hinzu. Übernehmen Sie anschließend die Paginierung von dieser abgerufenen Seite und ersetzen Sie damit die alte, damit Sie immer wissen, wohin der „Weiter“-Link führt. Kein Neuladen der Seite, keine sichtbaren Seitenzahlen – die Produkte erscheinen einfach beim Scrollen.

Schritt 1: Blenden Sie die Paginierung aus, lassen Sie sie aber auf der Seite

Entfernen Sie das Paginierungs-Markup nicht. Blenden Sie es lediglich mithilfe der Cornerstone-Klasse „u-hiddenVisually“ optisch aus. Auf diese Weise ist die Paginierung weiterhin vorhanden und funktioniert auch dann, wenn JavaScript aus irgendeinem Grund nicht geladen werden kann oder eine Suchmaschine die Seite crawlt. Das ist eine praktische Fallback-Lösung, die man kostenlos nutzen kann.

Schritt 2: Fügen Sie ein Sentinel-Element hinzu

Fügen Sie direkt nach dem Produktraster ein leeres `div`-Element ein. Seine einzige Aufgabe besteht darin, Ihnen mitzuteilen, wann der Nutzer fast bis zum Ende der Seite gescrollt hat.

let sentinel = document.createElement('div');
sentinel.id = 'infinite-scroll-sentinel';
grid.insertAdjacentElement('afterend', sentinel);

Versuchen Sie nicht, die Paginierungsschaltflächen direkt zu überwachen. Da diese ausgeblendet sind, löst der Browser keine zuverlässigen Scroll-Ereignisse für sie aus. Ein spezielles Sentinel-`div`-Element ist wesentlich vorhersehbarer.

Schritt 3: Beobachte das Sentinel-Element mit IntersectionObserver

Dies ist die Browser-API, die dir mitteilt, wann ein Element in den Viewport gelangt. Verwende sie, anstatt selbst auf Scroll-Ereignisse zu warten, da der Browser alle leistungsrelevanten Aspekte für dich übernimmt.

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting && !isLoading) loadNextPage();
    });
}, {
    rootMargin: '200px',
});

observer.observe(sentinel);

Der Teil „rootMargin: ‚200px‘“ bedeutet lediglich, dass das Laden etwas früher beginnt, bevor der Nutzer tatsächlich den unteren Rand erreicht, sodass keine unangenehme Pause entsteht, in der er leeren Raum sieht.

Schritt 4: Die nächste Seite abrufen und die benötigten Daten extrahieren

Wenn der Sentinel in den Sichtbereich gelangt, rufe die URL aus dem aktuellen „Weiter“-Link der Paginierung ab, analysiere den zurückgegebenen HTML-Code und extrahiere daraus das Produktraster und den Paginierungsblock.

const res = await fetch(nextUrl);
const html = await res.text();
const doc = new DOMParser().parseFromString(html, 'text/html');
const newGrid = doc.querySelector('.productGrid');
const newPagination = doc.querySelector('.pagination');

Füge dann die neuen Produkte zum bestehenden Raster hinzu und ersetze den alten Paginierungsblock durch den frisch abgerufenen.

Array.from(newGrid.children).forEach((li) => grid.appendChild(li));
pagination.replaceWith(newPagination);

Wir ersetzen die Paginierung, anstatt lediglich einmal den href-Link auszulesen und die Seitenzahl selbst zu erhöhen, da BigCommerce auf jeder abgerufenen Seite bereits genau angibt, wie der nächste Link lautet. Sie müssen keine Berechnungen zur Seitenzahl anstellen, und die Funktion hört automatisch auf zu funktionieren, sobald keine nächste Seite mehr zu finden ist.

Schritt 5: Wissen, wann man aufhören muss

Auf der letzten Seite rendert BigCommerce schlichtweg überhaupt keinen „Weiter“-Link. Die Abbruchbedingung ist also kinderleicht: Wenn in der gerade abgerufenen Paginierung kein „Weiter“-Link vorhanden ist, trennen Sie den Observer, und schon sind Sie fertig.

const nextLink = pagination.querySelector('.pagination-item--next a');
if (!nextLink) observer.disconnect();

Was zu beachten ist

  • Doppelte Ladevorgänge. Wenn jemand schnell scrollt, kann der Sentinel den Observer mehrmals auslösen, noch bevor der Abruf überhaupt abgeschlossen ist. Fügen Sie um den Abrufaufruf herum ein einfaches „isLoading“-Flag ein, um zu verhindern, dass Produkte doppelt hinzugefügt werden.
  • Facettensuche und Sortierung. Wenn das Theme Filter oder ein Sortier-Dropdown enthält, ersetzen diese in der Regel das gesamte Produktraster durch einen eigenen AJAX-Aufruf. Die Einrichtung des Infinite Scroll muss danach erneut ausgeführt werden, da sie sonst weiterhin einen Sentinel überwacht, der nicht mehr existiert – oder schlimmer noch, einen, der an alte Produkte gebunden ist. Haken Sie sich in das Ereignis ein, das die facettierte Suche auslöst, wenn sie das Rendern abgeschlossen hat, und führen Sie die Setup-Funktion für das aktualisierte Raster erneut aus.

Lohnt es sich?

Für die meisten Shops ja, insbesondere für solche mit vielen Produkten in einer Kategorie, bei denen das Durchklicken der Seiten auf Mobilgeräten mühsam ist. Allerdings ist das unendliche Scrollen nicht immer die richtige Wahl. Wenn die Fußzeile oder ein Bereich „Nach Kategorie einkaufen“ unterhalb des Rasters für die Navigation oder SEO wichtig ist, kann das unendliche Scrollen diese Elemente für immer verbergen. Es lohnt sich, dies mit dem Kunden vor der Umsetzung zu besprechen, nicht erst danach.

Insgesamt handelt es sich hierbei um eine jener Funktionen, die zunächst nach einer umfangreichen Neuprogrammierung klingen, am Ende aber vielleicht achtzig Zeilen JavaScript umfassen, wobei der Großteil davon lediglich die sorgfältige Handhabung eines Fetch-Aufrufs ist.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung im Zusammenhang mit Bigcommerce benötigen. Sie können auch unsere Website besuchen, um sich über unsere Dienstleistungen zu informieren.