Dem Käufer werden "endlos" alle zutreffenden Produkte auf einer Seite angezeigt. Das (Nach-)Laden der Produkte erfolgt, sobald der Käufer den unteren Bereich der jeweils angezeigten Produktliste erreicht.

Wegweiser: Blättern in Produktlisten

Folgender Quellcode wird benötigt:
 

{CAT-Data}
	<div class="wsAjaxLoad">
		{@PR-DATA}
			<!-- Produktbox einfügen -->
		{/@PR-DATA}

		{WS-ListPagingNext}
			<div class="wsCategoryPagingNextAjaxDelete">
				<a href="~WS-ListPagingNextLink~" class="wsCategoryPagingNext" data-ws-ajax-target=".wsAjaxTargetNext-~CAT-CurrPage~">Weitere Produkte laden</a>
			</div>
			<div class="wsAjaxTargetNext-~CAT-CurrPage~"></div>
		{/WS-ListPagingNext}
	</div>
{/CAT-Data}


<script>
	function isInViewport(el) {
		var rect = el.getBoundingClientRect();
		return (
			rect.top >= 0 &&
			rect.left >= 0 &&
			rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
			rect.right <= (window.innerWidth || document.documentElement.clientWidth)
		);
	}
	
	document.addEventListener('scroll', function () {
		var wsCategoryPagingNext = document.querySelector('.wsCategoryPagingNext');
		if (wsCategoryPagingNext) {
			var viewportState = isInViewport(wsCategoryPagingNext) ? 'visible' : 'not visible';
			if (viewportState == 'visible') {
				var wsAjaxTarget = wsCategoryPagingNext.getAttribute("data-ws-ajax-target");
				var wsAjaxTargetLink = wsCategoryPagingNext.getAttribute("href");
				var wsAjaxTargetElement = document.querySelector(wsAjaxTarget);
				$(wsAjaxTargetElement).load(wsAjaxTargetLink + " .wsAjaxLoad");
				document.querySelector(".wsCategoryPagingNextAjaxDelete").remove();
			}
		}
	}, {
		passive: true
	});
</script>