I’m sure most of you are aware of the infinite scroll feature we’re writing about. If not, check out: Svpply, Pinterest, or Lookbook.nu. The concept is not too hard to understand. When the page first loads, it loads an initial amount of items, and after the user has scrolled to the bottom of the content, more content is loaded and the user has the ability to keep scrolling. Assuming there is an endless amount of content, the user could scroll forever, hence infinite.
In our example, we are going to be creating a basic News Feed, with the page initially loading 3 articles, and when the user scroll to the bottom of the page, we load more articles one at a time.
In the above example you’ll notice the div, #articles-container, has two data attributes: data-start-at and data-increment-by. These two pieces of data are the first inklings to the infinite scroll functionality. The data-start-at value corresponds to the number of items we are going initially have on the page. Data-increment-by is the value for the number of articles we want to load once we reach the bottom of the page. After loading this into the browser, here is what we should have:
Next, we’ll go over our EE setup and add the Channel tags necessary for our page load content.
Within the EE Control Panel we have created a Field Group, News, which will hold our news stories. We have two additional fields for our example:
- news_image : image field
- news_content : text area field
We have also created a Channel, News, which uses our News Field Group. After creating a handful of test entries, we will go back into our markup and add EE tags to list our articles. (You’ll probably want to create 7 - 10 entries to really test this out.)
The channel:entries tag should be nothing out of the ordinary, but notice we are setting the limit to 3. This limit parameter should have the same value as the data-start-at attribute we created on the #articles-container div.
After loading the page with the EE tags implemented we should get an output resembling this:
After including jQuery and Endlessscroll, we’ll want to create a class to control the infinite scroll feature. In our example, we have called this Scroll_class. The first method we’re going to add to Scroll_class is init, which will handle setting up some global JS variables.
In the first part of the init method we get a reference to the container holding all the articles. Next, we get the two data attributes we specified and set another property, self.current_index, which will hold the number of articles we have loaded onto the page at any given point during the scrolling.
Please use a modern version of jQuery, as an old version may not support the .data() method.
In this init method, we set self.current_index to the self.start_at value because it will initially correspond to the number of articles we load onto the page. Next, we setup two fuse properties. These will be used to alert us when we need to stop loading content, either because of an error or if we have no more content to load. Finally, we initialize our endlessScroll event. The endless-scroll plugin has a variety of options, but here are the ones we are using:
- bottomPixels: How many pixels from the bottom of the page we want the event to fire at.
- fireDelay: How many milliseconds to wait before we let another event fire off.
- fireOnce: Only fire once until the execution of the current event is completed.
- callback: The function to run after the event has fired.
For the callback parameter we create an anonymous function, which in-turn calls another Scroll_class method, get_new_content.
The get_new_content method needs to do 2 main things: One, it needs to load our new content. Two, it needs to increment our self.current_index property, which tells us what specific piece of content to load. Here is the code for this method:
First, you’ll see we have a conditional checking to see if we are at the end of the content or if we have encountered an error. Assuming both of these are set to false, we proceed. The next piece is setting up an AJAX call to request our new content. Our AJAX options are:
- type - we want to send the data to EE via POST vars.
- url - this is the template our ajax call will get content from
- data - the data that will be passed via POST.
- success - the function to call after the content has been returned
Notice that the data object has two properties: offset and limit which we set to our two class properties self.current_index and self.increment_by.
Our success function has the parameter data, which holds the HTML to the content being returned. The first thing happening in the method is trimming the data variable.
Sometimes, because of the EE template parser, content can have white spaces preceding and trailing the markup.
Next, check to see if the data returned was the string “error” or “end”, which would signify each respective issue when loading content. If one of those strings is detected, the class property is set and we return false, causing no content to be added to the screen. Assuming the content that was returned is not one of our fuse flags, we will then append the HTML returned to the container. Finally, after the new content has been added to the screen we increment the self.current_index property.
The last major part of the infinite scroll technique is returning new content from the AJAX request. In our example, we have created another template, ajax_scroll.html, which contains HTML and EE tags to return our content. As we saw in the previous section, we’re passing two POST variables with our ajax request: offset and limit, and in order to access these we have enabled PHP within this specific template, with it being parsed on input.
You can probably use another plugin or extension, such as Mo’ Variables, to handle this without turning on PHP, but for the sake of simplicity we will rely on PHP for this example.
Within this template we have 3 major pieces:
- Getting the post variables
- An EE chanel entries tag
- The markup
After getting this last piece in place, we are done with the implementation. Fire up your page to see how things look, hopefully your content loads and scrolls correctly.
That’s it! Pretty simple, right?
The second drawback would be the duplicate code in the ajax_scroll.html template. We typically try to keep our code as DRY as possible and having two identical code blocks, which both need to be maintained, is somewhat cumbersome. You could probably come up with a pretty quick snippet to handle this, but thats something for the developer to decide for themselves.