markocupic / contao-news-infinite-scroll-bundle

1.6.0 2026-10-10 10:30 UTC

Requires

• php: ^8.2
• contao/core-bundle: ^5.3 || ^6.0
• contao/news-bundle: ^5.3 || ^6.0
• symfony/config: ^6.4 || ^7.0 || ^8.0
• symfony/dependency-injection: ^6.4 || ^7.0 || ^8.0
• symfony/http-foundation: ^6.4 || ^7.0 || ^8.0
• symfony/http-kernel: ^6.4 || ^7.0 || ^8.0
• symfony/security-core: ^6.4 || ^7.0 || ^8.0
• symfony/translation-contracts: ^3.0

Requires (Dev)

• contao/manager-plugin: ^2.12
• contao/test-case: ^5.3 || ^6.0

Conflicts

• contao/manager-plugin: <2.0 || >=3.0

LGPL-3.0-or-later

• Marko Cupic

• news
• contao
• scroll
• infinite
• newslist
• vanilla script

Published on Packagist.org on 2026-10-10 10:42 UTC

README

Contao News Infinite Scroll

Dieses Frontend-Modul für Contao CMS ermöglicht das Nachladen von Newsartikeln nach domready. Sobald ein im Template definierter Anker durch Scrollen erreicht wird, werden automatisch/manuell per Ajax die weiteren News-Artikel nachgeladen.

Anforderungen

• PHP ^8.2
• Contao ^5.3 || ^6.0

Installation

Per Contao Manager oder über die Konsole mit

composer require markocupic/contao-news-infinite-scroll-bundle

Nach dem Installationsprozess muss abschliessend noch die Datenbank aktualisiert werden.

php vendor/bin/contao-console contao:migrate

Modulkonfiguration

• Im Contao Backend muss als Erstes ein neues Modul Newslist Infinite Scroll angelegt werden.
• Wichtig! In der Moduleinstellung muss die Paginierung aktiviert werden: Wählen Sie für das Feld Elemente pro Seiteeine Zahl grösser als 0.
• Das Modul verwendet standardmässig das Template mod_newslist_inf_scroll.
• Wichtig! Wechseln Sie im Contao Backend zu Themes -> Layout und binden Sie im Seitenlayout das Template js_news_infinite_scroll ein.

Geschafft! 😉 Im Frontend sollten nun beim Erreichen des letzten Artikels je nach Einstellung im Template (siehe unten) durch Scrollen oder Drücken des Buttons weitere Artikel nachgeladen werden.

Templates

Alle Templates sind Twig-Templates (Contao 6 unterstützt keine .html5-Templates mehr):

Template	Zweck
mod_newslist_inf_scroll.html.twig	Modul-Template
_mod_newslist_infinite_scroll_ajax.html.twig	Markup der per Ajax nachgeladenen Artikel
js_news_infinite_scroll.html.twig	JavaScript-Initialisierung (im Seitenlayout einbinden)

Weitere Einstellungen

Um die Standardeinstellungen im Template vendor/markocupic/contao-news-infinite-scroll-bundle/contao/templates/twig/js_news_infinite_scroll.html.twig updatesicher zu überschreiben, legen Sie ein neues Template in templates/js_news_infinite_scroll.html.twig an.

Assets bauen

npm install
npm run build

NewsInfiniteScrollBundle.mp4