A. Was macht das Plugin?


Es verbessert die Usability für Deine Besucher. Die Kategorieseiten (Artikellisten) werden damit endlos scrollbar (auch: infinite scrolling genannt), sodass ein lästiges Wechseln der Seiten (Paginierung) entfällt.


Insbesondere auf mobilen Endgeräten ohne Maus sehr hilfreich, da nach unten immer weitere Produkte aus der Kategorie nachgeladen werden.

Dabei wird auch auf die Anforderungen des SEO geachtet, sodass die Artikellisten optimal für Google aufbereitet werden.


Das Plugin

  • Lädt die Produkte auf Kategorieseiten endlos nach
  • Verbessert so auch die Geschwindigkeit der Produktanzeige
  • Achtet auf SEO konforme Umsetzung


B. Welchen Vorteil bringt mir das?

  • Bessere Usability im Shop
  • Optimale Aufbereitung für mobile Endgeräte
  • Google konforme Umsetzung


1. Konfiguration


Öffne im Backend Deines JTL Shops (http://[DeineShopUrl]/admin) die Pluginverwaltung (Menüpunkt Plugins > Pluginverwaltung) und wähle dort das Plugin aus.


1.1 Einstellungen

Folgende Einstellungen stehen Dir zur Verfügung:

  • Endless Scrolling aktivieren: Hier aktivierst oder deaktivierst die Funktion ganz einfch auf Knopfdruck
  • Nachladen: Das Nachladen geschieht endweder automatisch oder nach dem Klick auf einen Button
  • Abstand zum Seitenende: Das Plugin lädt die nächste Seite, sobald der untere Rand des Browserfensters das Ende der Artikelliste erreicht hat. Willst Du das Nachladen bereits früher auslösen, so kannst Du hier einen Puffer in Pixeln angeben.
  • Selektor für die Artikelliste: Hier gibst Du den Selektor zu Deiner Artikelliste an. Mit Klick auf den Button kannst Du den Standard Selektor für das Tiny / Evo Template eintragen lassen.
  • Selektor Produktwrapper: Der Selektor für den Container, in dem alle einzelnen Produkte enthalten sind
  • Canonical Tag: Hier kannst Du festlegen, ob der Canonical Tag auf Seite 1 der Artikelliste bzw. Suchergebnisse gesetzt, oder belassen werden soll. (auf sich selbst)
  • Pagination: Du kannst hier festlegen, ob die Shop-eigene Pagination angezeigt, ausgeblendet, oder komplett entfernt werden soll.
  • Return-to-top-Button: Schaltet den Return-to-top-button ein oder aus.
  • Ladeanimation: Diese erscheint beim Nachladen der Artikel



Screen


1.2 Troubleshooting

Werden Artikel nicht richtig nachgeladen, kann das an den beiden Selektoren liegen. Selektoren können mittels Inspektor der Konsole herausgefunden werden. Rufe dafür im Frontend eine Kategorieseite auf und öffne die Konsole (Firefox, Chrome, Internet Explorer). Anleitung


Falls in der Konsole eine Warnung in der Form "There are multiple ... on this site" steht, bedeutet dass, das der Selektor für die Produktliste nicht eindeutig ist. Dieser sollte dann verfeinert werden (Selektoren). 


Steht dort hingegen "ERROR: cannot fetch more products", dann ist der Selektor für den Produktwrapper falsch eingestellt. Während der Selektor für die Artikelliste nur auf die äußerste Ebene der Artikelliste zeigt, muss der Selektor für den Produktwrapper auf das Element zeigen, nach dem direkt die Artikelboxen kommen. Im Standardtemplate ist das ein div mit der Klasse "product-wrapper".