Hi, I’m using the Casper theme and I want to use the infinite-scroll.js file within the theme in a custom page I created. How can I achieve this?
This is my custom page file:
What I’m trying to do here is to list 6 posts when the user first visits the page, and then as they scroll down, fetch additional posts from the theme in sets of 3.
Casper has infinite scroll on the index.hbs page already, so I’d recommend taking a look at how it’s implemented there. I suspect the javascript that runs to create infinite scroll on index routes is not running on this page you’ve created.
Yes, it’s working on the index.hbs and author.hbs pages. However, I couldn’t figure out where the data for this code is coming from.
There is no HTML element or similar in the author.hbs file. It says ¨Used on all pages where there is a list of posts¨ but even if I directly copy and paste the code from the author.hbs file, the infinite scroll doesn’t work.
Right. So the infinite scroll code looks for that link tag to figure out what the next page on a paginated route is, then grabs data from there. The problem is that page-test.hbs is (I’m guessing) not a paginated route. What you’re going to need to do to make this work is to create a route (use routes.yaml) for the posts that you want on this route. That’ll make them available in a paginated way. I would start from the index.hbs file – you won’t have a #get (because the routes.yaml file causes these posts to be there already), but will have a #foreach. Add whatever layout changes you want to that file, but keep the #foreach and don’t add a #get.