WDTUTORIALS
Web & Game Development Tutorials
Unity, Django, Drupal, C#, Python…
menu
Samuli Natri 2016.10.18
Entrepreneur. Software developer since the 90's.
Attended Helsinki University Of Technology (Computer Science) and Helsinki University (Social Sciences).

Drupal - How To Add Load More Button With Views Infinite Scroll Module

Tutorial on how to add a pager option to load more items with Ajax.

Installation

drush -y en views_infinite_scroll

Create A View

Go to Structure > Views > Add new view:

Save and edit.

Select Infinite Scroll as the pager:

Theme it

Edit the Content: Title field:

Select the field element as H2:

Add styling (themes/mytheme/less/variable-overrides.less):

.path-views-infinite-scroll {
  h1, .view-views-infinite-scroll {
    text-align: center;
  }
}

And there we have it:

Autoload Items

In the pager settings select Automatically Load Content to load items when user scrolls down:

Views Infinite Scroll