TypoScript¶

infinitescrolling needs some basic TypoScript configuration. To do so you have to add an +ext template to either the root page of your website or to a specific page where you want to use the infinitescrolling feature.

Locate page

You have to decide where you want to insert the TypoScript template. Either root page or page where you want to use the infinitescrolling feature.
Create TypoScript template

Switch to template module and choose the specific page from above in the pagetree. Choose Click here to create an extension template from the right frame. In the TYPO3 community it is also known as "+ext template".
Add static template

Choose Info/Modify from the upper selectbox and then click on Edit the whole template record button below the little table. On tab Includes locate the section Include static (from extension). Use the search above Available items to search for infinitescrolling. Hopefully just one record is visible below. Choose it, to move that record to the left.
Save

If you want you can give that template a name on tab "General", save and close it.
Constants Editor

Choose Constant Editor from the upper selectbox.
infinitescrolling constants

Choose PLUGIN.TX_INFINITESCROLLING from the category selectbox to show just infinitescrolling related constants
Configure constants

Adapt the constants to your needs.

Constants¶

includeJQueryLibrary¶

Type: boolean
Default: 1 (true)
Path: plugin.tx_infinitescrolling

Set to 1 (true) to use external included jquery JavaScript library. For europe we prefer to deactivate (0) that feature because of GDPR/DSGVO.

scrollContainer¶

Type: string
Default: jQuery(window)
Path: plugin.tx_infinitescrolling

jQuery selector for Scroll Container: In which container the scrollbar is placed?

Sample: jQuery(window)

container¶

Type: string
Default: (none)
Path: plugin.tx_infinitescrolling

jQuery selector for item container: Enter the selector which selects the container which contains all f.e. news or event items you want to paginate.

Sample: div.news-list-container

item¶

Type: string
Default: (none)
Path: plugin.tx_infinitescrolling

jQuery selector for one single item: Enter the selector which contains exactly one single item within the list container.

Sample: div.news-list-item

pagination¶

Type: string
Default: ul.f3-widget-paginator
Path: plugin.tx_infinitescrolling

jQuery selector for Paginator: Enter the selector for the paginator. This selector will hide paginator in Frontend.

Sample: div.news-list-browse

next¶

Type: string
Default: li.next a
Path: plugin.tx_infinitescrolling

jQuery selector for next link: Enter the selector for the next link within the paginator. InfiniteScrolling will read the href attribute to read the container of next page and append it to current container.

Sample: div.browseLinksWrap a:eq(-2)

previous¶

Type: string
Default: li.previous a
Path: plugin.tx_infinitescrolling

jQuery selector for previous link: Enter the selector for the previous link of the paginator. The href attribute of this element will be used to get the items from the previous page. Make sure there is only one element that matches the selector.

Sample: li.previous a

loader.html¶

Type: string
Default: <div class="ias-spinner" style="text-align: center;"><img src="|"/></div>
Path: plugin.tx_infinitescrolling

Change HTML of loader icon: Enter your own HTML, if you want another rendering of the loader icon. Use {src} to implement the original loader icon from infinitescrolling JS.

Sample: <div class="ias-spinner" style="text-align: center;"><img src="|"/></div>

delay¶

Type: int
Default: 0
Path: plugin.tx_infinitescrolling

Define a delay until further items will be loaded: If you want the user to see the loader icon working you should set this value to something higher than 0. Value in milliseconds.

Sample: 5

offset¶

Type: int
Default: 5
Path: plugin.tx_infinitescrolling

Amount of loads: How often more items should be loaded, before we show a link to manually load further items? Don't set it too high as footer may not be reachable then.

Sample: 7

negativeMargin¶

Type: int
Default: 200
Path: plugin.tx_infinitescrolling

Start next request when margin (ps) has been reached: Define a margin from the lowest border of the last item. If scrollbar reaches this margin the new request will be started. As higher the value as earlier the page will start loading further items.

Sample: 130