Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Infinite scrolling in Drupal 8 with Views Infinite Scroll module

Parent Feed: 

We love to say that Drupal 8’s logo resembles the infinity sign, which means infinite opportunities for websites. It includes plenty of ways to make your website user-friendly and engaging.

One of the techniques used in this area is infinite scrolling, which can be implemented through a nice Drupal 8 module called Views Infinite Scroll. Let’s see what infinite scrolling is and how to design it with the help of this Drupal 8 module.

A glimpse at the technique: what is infinite scrolling?

Infinite scrolling means continuous content uploading as the user scrolls down the page. This can optionally be accompanied by the “load more” button at the bottom of the page, which infinitely uploads the content upon click.

Endless pages make the user’s interaction with the website more natural because it is convenient to not have to click on the next page. This technique is especially popular with content-rich websites, social networks, e-commerce stores, etc. It is incredibly useful for long pages and mobile navigation.

However, infinite scrolling should be used carefully so it does not annoy the user, distract their attention from their main goal, or block the calls-to-action. For example:

  • If the footer “disappears” together with your contacts every time your user scrolls, consider using a sticky footer or move the key links to the sidebar.
  • Try the “load more” button to give the user more control and never block anything.
  • You can also add more usability by letting the user choose the number of displayed items before hitting “load more.”

All this and more is provided by the Views Infinite Scroll module in Drupal 8, which we will now move on to.

Introduction to the Views Infinite Scroll module in Drupal 8

The Drupal 8 Views Infinite Scroll module works with the Drupal Views. This allows you to present any Drupal data you wish — collections of images, articles, products, lists of user-profiles, or anything else.

You can:

  • let the content be infinitely uploaded upon the scroll
  • add a “load more” button with any text on it
  • expose some viewing options to users

The Views Infinite Scroll module is available both for Drupal 7 and Drupal 8. However, the Drupal 8 version has a special bonus — it uses the built-in AJAX system of Drupal Views and requires no third-party libraries. In the next chapter, we will look more closely at how it works.

How the Views Infinite Scroll Drupal module works

Installing the module

We start by installing the Views Infinite Scroll Drupal module in any preferred way and enabling it. In our example, we are using its 8.x-1.5 version.

Installing the Views Infinite Scroll module

Creating the Drupal view

Now let’s prepare our Drupal view with a few elements in it. In our case, the grid view will show two columns of car images.

When creating the page, we choose the “create a page” option. The default “Use a pager” and “10 items to display” settings can remain unchanged so far — we will take care of this in the next step.

Drupal 8 Views

Setting up the Drupal Views infinite scrolling

On the Drupal Views dashboard, we select the Pager section and open the “Use pager — mini” option.

Setting Drupal 8 Views pager to infinite scroll

There, we switch the pager to “Infinite Scroll.”

Setting Drupal 8 Views pager to infinite scroll

Next, we configure the settings for the Infinite Scroll. We set the number of items per page to 4.

And, most importantly, we can check or uncheck the automatic loading of content. If we uncheck it, there will be a “load more” button, for which we can write our custom text. “View more luxury cars” sounds good for this example.

Configuring infinite scroll in Drupal 8 Views

After saving the view and checking the page, we see 4 cars on page with a nice “View more luxury cars” button. Success!

View more button in Drupal 8 Views

Exposing choices to users

In our Infinite Scroll settings, there is the “Exposed options” section. By checking its options, you will allow users to:

  • choose the number of items displayed
  • see all items
  • specify the number of items skipped from the beginningExposed options in Drupal 8 infinite scroll

With these applied, our collection now looks like this.
Infinite scroll in Drupal 8 Views with exposed options

Additional CSS tweaks will make the view look exactly the way you want as far as colors, fonts, distances between elements, etc.

Apply infinite scrolling on your website

Make your customer satisfaction infinite through the use of the infinite scroll technique! So if you want to:

  • install and configure the Views Infinite Scroll module
  • customize the output with CSS
  • create a custom Drupal module for your ideas in scrolling
  • design the scrolling effect from scratch using the latest techniques

contact our Drupal team!

Author: 
Original Post: