As you might guess from the title already, in today's Drupal tutorial I will write about how to configure infinite scroll/load more button for Drupal 8 website. The best - both behaviors can be achieved using just one module - Views Infinite Scroll
Check out following tutorials for Drupal 7: Drupal masonry front page, Views lode more pager with Ajax for Drupal
And again, as in the previous tutorials, you can find a live preview on Tourgeorgia.eu
- Download and enable Views Infinite Scroll module
- Visit views page, you would like to attach infinite scroll or load more function
- Change Pager: Infinite scroll, I will use 10 items to load on default
Pager settings for Infinite scroll
Now in order to make it work with Ajax, let's turn on Ajax:
- Under Advanced - > Other: Use AJAX: Yes
Almost there, but here are few things we should fine tune here
Settings for Infinite Scroll
Under Pager (use pager) click on Infinite Scroll Options and check next to the Automatically load Content
Automatically load Content
Settings for Load more
Repeat the same steps as for infinite scroll, just make sure to uncheck Automatically load Content
Here you go - a really easy way to setup both infinite scroll or load more pager with Ajax.
Load more button with Ajax for Drupal 8 website
Optionally
CSS code to make load more button 100% width (for Bootstrap powered template}
.pager li > a, .pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 0px;
width: 100%;
}
CSS bug wit custom views-row classes (first, last) in Drupal 8
Seems there is a bug with Drupal 8 views, when trying to render classes for views-row. There exist some workarounds, but right I find them secondary and I'm ready to wait until it will be solved with next views updates.