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.
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.
Setting up the Drupal Views infinite scrolling
On the Drupal Views dashboard, we select the Pager section and open the “Use pager — mini” option.
There, we switch the 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.
After saving the view and checking the page, we see 4 cars on page with a nice “View more luxury cars” button. Success!
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 beginning
With these applied, our collection now looks like this.
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!
