Betrachtet man große und bekannte Shops, fällt dabei auf, dass die sogenannte Pagination (d.h. Navigation über mehrere Seiten) schon fast ausgedient hat. Insbesondere auf mobilen Endgeräten ist das navigieren über mehrere Seiten zum Betrachten von Produktlisten lästig. Abhilfe schafft hier das sogenannte Infinite Scroll (auch Endless Scroll bzw. eingedeutscht unendliches scrollen). Für das beliebte Open Source Shop-System WooCommerce für WordPress, gibt es hier noch keine Out-Of-The-Box Lösung. Stattdessen lässt sich Infinite Scrolling in WooCommerce in Form eines kleinen Plugins oder direkt in ein Child-Theme implementieren.
SEO konformes Infinite Scrolling
Infinite Scrolling ist nicht gleich Infinite Scrolling. Damit Google möglichst zufrieden mit der Implementierung ist, sollte man einige Grundsätze beachten. Sinnvoll ist es laut Google (s. Artikel GoogleWebmasterCentral) z.B. die veränderte URL (d.h. das Anhängen der Parameter für die jeweilig aktive Seite) während des scrollens an die aktuell sichtbare Seitenzahl anzupassen. Sollte der Besucher nämlich während des scroll-Vorganges die Seite neu laden, würde er so auf der derzeit aktiven Seite landen und gleich die relevanten Produkte angezeigt bekommen. Es gibt noch einige weitere Vorgaben wie z.B. das Verhindern von Duplikaten und das Verwenden von rel=“prev“ bzw. rel=“next“ als Verweis auf die folgende bzw. vorherige Seite (die meisten WordPress SEO Plugins unterstützen diese meta-tags).
Umsetzung mit WooCommerce
Die Implementierung von Infinite Scroll in WooCommerce bedarf einiger manueller Anpassungen. Aus diesem Grund empfehle ich, die Änderungen z.B. in einem Child-Theme vorzunehmen, damit die Änderungen auch nach Update des Eltern-Themes erhalten bleiben.
Für den Start benötigen wir eine Javascript-Datei, in der wir die nötigen Anpassungen vornehmen werden. Am Ende dieses Beitrags kannst du dir alle notwendigen Javascript-Dateien ganz bequem per GitHub downloaden. Nun ein paar kleinere Erläuterungen zum Code:
jQuery( function( $ ) {
if ( $( 'ul.page-numbers' ).length && $( '.archive' ).length ) {
var currentPage = parseInt( $( 'ul.page-numbers .current' ).text() );
$( 'ul.page-numbers .current' ).replaceWith( '' + $( 'ul.page-numbers .current' ).text() + '' );
if ( $( '.products li' ).last().length ) {
$( '.products li' ).last().attr( 'data-page', currentPage );
$( '.products li' ).last().attr( 'data-page-url', window.location.href );
$( '.products li' ).last().addClass( 'waypoint-page waypoint-page-' + currentPage );
set_waypoint( $( '.products li' ).last(), window.location.href );
}
$( '.products' ).waypoint('infinite', {
items: '.product',
onAfterPageLoad: function( $nr, $href ) {
set_waypoint( $( '.waypoint-page-' + $nr ), $href );
},
});
}
function set_waypoint( $element, $href ) {
$element.waypoint( function() {
var active = parseInt( $( this ).data( 'page' ) );
$( 'ul.page-numbers' ).find( '.current' ).removeClass( 'current' );
var index = 0;
$( 'ul.page-numbers li' ).each( function() {
if ( $( this ).find( '.prev, .next' ).length )
return;
if ( ++index == active )
$( this ).find( 'a' ).addClass( 'current' );
});
$( 'ul.page-numbers' ).find( 'a.next' ).parent().show();
$( 'ul.page-numbers' ).find( 'a.prev' ).parent().show();
if ( index == active )
$( 'ul.page-numbers' ).find( 'a.next' ).parent().hide();
else if ( active == 1 )
$( 'ul.page-numbers' ).find( 'a.prev' ).parent().hide();
history.replaceState(null, null, $href );
});
}
});
Zuerst wird mit Hilfe von jQuery überprüft, ob wir uns auf einer Archiv-Seite (z.B. Produkt-Kategorie-Seite oder Produkt-Tag-Seite) befinden und ob es sich hierbei um eine über mehrere Seiten führende Liste von Produkte handelt (die CSS-Klasse für die WooCommerce Paginierung muss zwingend .page-numbers lauten, anderenfalls müsste das angepasst werden). Als erstes wird mit Hilfe des jQuery Waypoint-Plugins ein „Wegpunkt“ für das letzte Element der aktuellen Seite erstellt (damit wir später beim Scrollen erkennen können, auf welcher „Seite“ sich der User gerade befindet). Zusätzlich dazu passen wir noch die Paginierung etwas an (wir fügen für die aktuelle Seite einen Link hinzu, standardmäßig ist dieser nämlich nur bei nicht-aktiven-Seiten gesetzt).
Jetzt wird es interessant: Mit Hilfe der von mir angepassten Version des jQuery Waypoint-Infinite-Scroll Plugins initialisieren wir nun den Infinite Scroll. Solltest du für deine Produkte eine andere CSS-Klasse als .products verwenden, müsstest du das an dieser Stelle entsprechend anpassen.
Die Funktion set_waypoints erstellt nach dem Laden der Produkte einer neuen Seite (und dem „Anhängen“ an den Content) zusätzlich „Wegpunkte“ um diese beim Scrollen identifizieren zu können. Sollten wir auf einen „Wegpunkt“ treffen wird sowohl die aktuelle URL angepasst als auch das aktive Element der Paginierung aktualisiert.
Einbinden der JS-Dateien in WooCommerce
Das Einbinden der Javascript-Dateien in WooCommerce zum implementieren von Infinite Scroll ist ganz einfach. Am Besten nutzt du dazu die Datei functions.php in deinem Child-Theme. Kopiere einfach nachfolgenden Code in deine functions.php und laden die Javascript-Dateien in deinen Child-Theme-Ordner hoch:
add_action( 'wp_enqueue_scripts', 'my_theme_set_infinite_scroll' );
function my_theme_set_infinite_scroll() {
if ( is_archive() ) {
wp_register_script( 'waypoints', get_stylesheet_directory_uri() . '/scripts/jquery.waypoints.min.js', array( 'jquery' ), '2.0.5', true );
wp_enqueue_script( 'waypoints' );
wp_register_script( 'waypoints-infinite-woocommerce', get_stylesheet_directory_uri() . '/scripts/jquery.waypoints-infinite-woocommerce.js', array( 'jquery', 'waypoints' ), '1.0.0', true );
wp_enqueue_script( 'waypoints-infinite-woocommerce' );
wp_register_script( 'infinite-scroll-init', get_stylesheet_directory_uri() . '/scripts/jquery.infinite-scroll-init.js', array( 'jquery', 'waypoints', 'waypoints-infinite-woocommerce' ), '1.0.0', true );
wp_enqueue_script( 'infinite-scroll-init' );
}
}
Dabei solltet ihr sicherstellen, dass die Javascript Dateien in eurem Child-Theme im Unterordner /scripts/ liegen. Ist das nicht der Fall, müsstet ihr den Pfad entsprechend anpassen. Nach dem update der functions.php und dem Hochladen der Javascript-Dateien sollte das Infinite Scrolling auf den Produkt-Archiv-Seiten problemlos funktionieren.
Ladeanimation beim Infinite Scrolling
Natürlich ist auch eine kleine Animation beim Nachladen der Inhalte vorgesehen. Dafür habe ich folgende HTML-Struktur vorgesehen, die per CSS z.B. mit einem Ajax-Loading-Icon versehen werden kann:
<div class="ajax-loader-wrapper">
<div class="ajax-loader"></div>
</div>
Hier noch ein kleines Code-Beispiel, wie der dazugehörige CSS-Code aussehen könnte. Als Ajax-Loading-Icon kann z.B. ein SVG-Icon von Brent Jackson genutzt werden.
.ajax-loader-wrapper {
text-align: center;
height: 60px;
vertical-align: middle;
}
.ajax-loader-wrapper .ajax-loader {
display: inline-block;
text-indent: -9999px;
width: 50px;
height: 30px;
background: url(images/ajax-loader.svg) no-repeat;
background-size: 50px 30px;
}
WooCommerce Themes mit Infinite Scrolling
Für alle die, denen das technische Know-How für die Implementierung (oder die Lust) fehlt, kann ich an dieser Stelle natürlich auch unser WooCommerce Theme VendiPro empfehlen, das speziell für den deutschen Markt entwickelt wurde und Infinite Scrolling seit der neuesten Version unterstützt. Falls du Interesse an diesem WooCommerce Theme hast dann findest du im Folgenden weitere Informationen.
Download
Die nötigen Javascript Dateien könnt ihr unter folgenden Links downloaden. Viel Spaß und Glück damit 🙂
- jQuery Waypoints (via GitHub)
- jQuery Waypoints Infinite Scroll (via Github, Original-Plugin ist hier zu finden)
- jQuery Infinite Scroll Init (via Github)