Pagination not working with Channel

Developer help Routing
1

Hello everyone,

My use-case is pretty simple but I can’t seem to get it to work:
I have a home-screen with a list of all posts (default Ghost conf) and I want to add a page that will only list posts with the primary_tag:model.
As I want this page to be different than the home-page I can’t use the /tag/ url and I’ll need to use channels via the file routes.yaml has explained on the doc: Ghost Themes - Dynamic URLs & Routing

All works well except the pagination. My first 10 posts (my configuration) are listed but then I get a infinite loading.

My routes.yaml is the following:

collections:
  /:
    permalink: /{slug}/
    template: index

routes:
  /models/:
    controller: channel
    filter: primary_tag:model
    template: models
    data: page.models

And the listing file (models.hbs) is not very different from the one that is working on index.hbs.

index.hbs - pagination works

{{!< default}}

<div class="content-area">
     
    <main class="site-main container">
        {{> "partners"}}
        <div class="post-feed">
            <div class="grid-item grid-sizer"></div>
            {{#foreach posts}}
                {{> "loop"}}
            {{/foreach}}
        </div>
        {{pagination}}
    </main>
</div>

models.hbs - pagination does not work

{{!< default}}

<div class="content-area">
    
    <main class="site-main container">
        
        {{> "partners"}}
       
        {{#foreach posts}}
            {{> "loop-detail"}}
        {{/foreach}}
       
        {{pagination}}
   
    </main>

</div>

I’ve searched the web for a while now and even came across this solution on the blog (How to create templates for content collections or channels with pagination? - #3 by anisul), but I can’t seem to apply this solution to my own configuration, ending with 404 errors.

Yes, I always run “ghost restart” for every routes.yaml change and I am using Ghost 5.19.0.

Can anyone please help me with this issue? I am losing hair with this one :smile:

Best regards

1 Like
2

I wonder about this line. You’re telling this route to get data from a page called models. Is that what you intended? Can you try removing that line and see what happens?

3

Thank you for the response Cathy. That line exists so Ghost can fetch some metadata so the model page doesn’t end with a title like “Xestnic (Page 1)”.

I’ve removed that line, restarted and I’ve still got the infinite loading at the end of the list.

Is there any place so I can check what is happening on the static creation of the page like a logging system that covers that?

4

It looks like you’re doing everything right. I tested a similar config and it worked.

When you say pagination doesn’t work, what do you mean?

A good way to debug this is to use the log helper. (I’m working on a tutorial for this now!)

In your models.hbs file, add this: {{log this}}.

Then, stop your Ghost site (ghost stop) and restart it using ghost run -D. This restarts your site in development mode. Then, visit the models page. In your console, you’ll now see all of the available data for the page. (You can also do {{log pagination}} to see what data is being output.

This will at least show you what data is available. Lmk if that helps you hone in on what’s going on. I would also check to make sure you’re using model/models consistently because using one rather than the other could cause problems.

3 Likes
5

Thank you, Ryan.

That did the trick. By logging I could finally understand what was going on with my pagination.

The problem was that the loading for the pagination would show, but the fetch for the second page wouldn’t trigger, and cut+pasting my custom-code and comparing with what was already working on the main feed I finally got it.

I am using the Edge theme (Edge) and on main.js there is a feed() function.

This was the original code, that didn’t work because my new custom pagination items didn’t have the grid-item class.

if ($('.pagination .older-posts').length) {
        grid.infiniteScroll({
            append: '.grid-item',
            history: false,
            outlayer: msnry,
            path: '.pagination .older-posts',
            prefill: true,
            status: '.infinite-scroll-status',
        });
    }

So I updated that code into this:

if ($('.pagination .older-posts').length) {
        grid.infiniteScroll({
            append: '.pagination-item',
            history: false,
            outlayer: msnry,
            path: '.pagination .older-posts',
            prefill: true,
            status: '.infinite-scroll-status',
        });
    }

Created a new class item “.pagination-item” and added for all the items that I wanted to be part of the pagination, updating the previous .grid-item and the new ones on models.hbs.

Right now the pagination works for all the previous feed and the new custom one for models.hbs.

Thank you once again, please let me know if you need any further explanation.
It’s a little late now and probably I didn’t explain myself well.

Best regards

3 Likes
6

Happy you figured it out!

1 Like