tv2regionerne / statamic-endless
There is no license information available for the latest version (v1.3.0) of this package.
v1.3.0
2024-09-09 09:07 UTC
Requires
- livewire/livewire: ^3.4
- statamic/cms: ^4.48 || ^5.0
This package is auto-updated.
Last update: 2024-10-09 09:18:35 UTC
README
Statamic Endless allows you to create infinite scroll lists that automatically or manually load new entries when you get to the end.
How to Install
You can search for this addon in the Tools > Addons
section of the Statamic control panel and click install, or run the following command from your project root:
composer require tv2regionerne/statamic-endless
How to Use
Make sure Livewire v3 is installed, then use the collection:endless
tag:
{{ collection:endless as="posts" from="blog" paginate="5" }} <div x-ref="append"> {{ posts }} {{ partial:blog/post }} {{ /posts }} </div> <button x-on:click="trigger" x-show="paginate.has_more_pages">Load More</button> {{ /collection:endless }}
Example with intersectors:
{{ collection:endless as="posts" from="blog" paginate="5" }} <div x-ref="append"> {{ posts }} {{ partial:blog/post }} {{ /posts }} </div> <div x-data="{ intersecting: false, init() { $watch('intersecting', () => this.check()); }, check() { if (this.intersecting && paginate.has_more_pages) { trigger().then(() => this.check()); } }, }" x-show="!loading && paginate.has_more_pages" x-intersect:enter="intersecting = true" x-intersect:leave="intersecting = false"> </div> {{ /collection:endless }}
You must enable pagination.
The content will be wrapped in a Livewire/Alpine component:
- You should add an
x-ref
of eitherappend
orprepend
to the element that contains your list. - You can call
trigger
to load more entries usingx-intersect
orx-on
. - You can check the loading state with
loading
.
On secondary loads variables from outside tag scope will only be avaliable if you list them in the context
parameter (pipe delimited). These variables must be serializable.