{"id":17762,"date":"2026-08-05T11:04:58","date_gmt":"2026-08-05T05:19:58","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17762"},"modified":"2026-08-05T11:06:36","modified_gmt":"2026-08-05T05:21:36","slug":"wie-ersetzt-man-in-bigcommerce-die-paginierung-durch-unendliches-scrollen","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-ersetzt-man-in-bigcommerce-die-paginierung-durch-unendliches-scrollen\/","title":{"rendered":"Wie ersetzt man in BigCommerce die Paginierung durch unendliches Scrollen?"},"content":{"rendered":"\n

Wenn Sie schon einmal eine Kategorieseite in BigCommerce<\/a><\/strong> erstellt haben, kennen Sie die Standardkonfiguration. Die Produkte werden in einem Raster angezeigt, und unten befindet sich eine Reihe mit Seitenzahlen. Klicken Sie auf \u201e2\u201c, warten Sie, bis die Seite neu geladen ist, klicken Sie auf \u201e3\u201c und warten Sie erneut. Das funktioniert zwar, entspricht aber nicht mehr unbedingt einem modernen Einkaufserlebnis. Viele Kunden w\u00fcnschen sich stattdessen \u201eInfinite Scroll\u201c, bei dem neue Produkte beim Herunterscrollen nachgeladen werden. Bei einem Cornerstone-Theme ist das einfacher umzusetzen, als es klingt.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Wie funktioniert das?<\/strong><\/h2>\n\n\n\n

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\u00fcgst diese Produkte zum aktuellen Raster hinzu. \u00dcbernehmen Sie anschlie\u00dfend die Paginierung von dieser abgerufenen Seite und ersetzen Sie damit die alte, damit Sie immer wissen, wohin der \u201eWeiter\u201c-Link f\u00fchrt. Kein Neuladen der Seite, keine sichtbaren Seitenzahlen \u2013 die Produkte erscheinen einfach beim Scrollen.<\/p>\n\n\n\n

Schritt 1: Blenden Sie die Paginierung aus, lassen Sie sie aber auf der Seite<\/strong><\/h3>\n\n\n\n

Entfernen Sie das Paginierungs-Markup nicht. Blenden Sie es lediglich mithilfe der Cornerstone-Klasse \u201eu-hiddenVisually\u201c 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\u00f6sung, die man kostenlos nutzen kann.<\/p>\n\n\n\n

Schritt 2: F\u00fcgen Sie ein Sentinel-Element hinzu<\/strong><\/p>\n\n\n\n

F\u00fcgen 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.<\/p>\n\n\n\n

let sentinel = document.createElement('div');\nsentinel.id = 'infinite-scroll-sentinel';\ngrid.insertAdjacentElement('afterend', sentinel);<\/code><\/pre>\n\n\n\n
Versuchen Sie nicht, die Paginierungsschaltfl\u00e4chen direkt zu \u00fcberwachen. Da diese ausgeblendet sind, l\u00f6st der Browser keine zuverl\u00e4ssigen Scroll-Ereignisse f\u00fcr sie aus. Ein spezielles Sentinel-`div`-Element ist wesentlich vorhersehbarer.<\/p>\n\n\n\n
Schritt 3: Beobachte das Sentinel-Element mit IntersectionObserver<\/strong><\/h3>\n\n\n\n
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\u00fcr dich \u00fcbernimmt.<\/p>\n\n\n\n
const observer = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n        if (entry.isIntersecting && !isLoading) loadNextPage();\n    });\n}, {\n    rootMargin: '200px',\n});\n\nobserver.observe(sentinel);<\/code><\/pre>\n\n\n\n
Der Teil \u201erootMargin: \u201a200px\u2018\u201c bedeutet lediglich, dass das Laden etwas fr\u00fcher beginnt, bevor der Nutzer tats\u00e4chlich den unteren Rand erreicht, sodass keine unangenehme Pause entsteht, in der er leeren Raum sieht.<\/p>\n\n\n\n
Schritt 4: Die n\u00e4chste Seite abrufen und die ben\u00f6tigten Daten extrahieren<\/strong><\/p>\n\n\n\n
Wenn der Sentinel in den Sichtbereich gelangt, rufe die URL aus dem aktuellen \u201eWeiter\u201c-Link der Paginierung ab, analysiere den zur\u00fcckgegebenen HTML-Code und extrahiere daraus das Produktraster und den Paginierungsblock.<\/p>\n\n\n\n
const res = await fetch(nextUrl);\nconst html = await res.text();\nconst doc = new DOMParser().parseFromString(html, 'text\/html');\nconst newGrid = doc.querySelector('.productGrid');\nconst newPagination = doc.querySelector('.pagination');<\/code><\/pre>\n\n\n\n
F\u00fcge dann die neuen Produkte zum bestehenden Raster hinzu und ersetze den alten Paginierungsblock durch den frisch abgerufenen.<\/p>\n\n\n\n
Array.from(newGrid.children).forEach((li) => grid.appendChild(li));\npagination.replaceWith(newPagination);<\/code><\/pre>\n\n\n\n
Wir ersetzen die Paginierung, anstatt lediglich einmal den href-Link auszulesen und die Seitenzahl selbst zu erh\u00f6hen, da BigCommerce auf jeder abgerufenen Seite bereits genau angibt, wie der n\u00e4chste Link lautet. Sie m\u00fcssen keine Berechnungen zur Seitenzahl anstellen, und die Funktion h\u00f6rt automatisch auf zu funktionieren, sobald keine n\u00e4chste Seite mehr zu finden ist.<\/p>\n\n\n\n
Schritt 5: Wissen, wann man aufh\u00f6ren muss<\/strong><\/p>\n\n\n\n
Auf der letzten Seite rendert BigCommerce schlichtweg \u00fcberhaupt keinen \u201eWeiter\u201c-Link. Die Abbruchbedingung ist also kinderleicht: Wenn in der gerade abgerufenen Paginierung kein \u201eWeiter\u201c-Link vorhanden ist, trennen Sie den Observer, und schon sind Sie fertig.<\/p>\n\n\n\n
const nextLink = pagination.querySelector('.pagination-item--next a');\nif (!nextLink) observer.disconnect();<\/code><\/pre>\n\n\n\n
Was zu beachten ist<\/strong><\/h2>\n\n\n\n