Hello! I am faced with the problem of infinite scrolling. When I go down the page the same posts appear i.e. they are duplicated. What am I doing wrong? I can provide a piece of code.
at the bottom of default.hbs
{{#if pagination.pages}}
<script src="{{asset “built/infinitescroll.js”}}">
{{/if}}
edited in infinitescroll.js
var feedElement = document.querySelector(’.show-more-cont’);
and
var postElements = this.response.querySelectorAll(’.grid-item’);
For example tag.hbs:
{{#get "posts" include="tags" filter="primary_tag:{{slug}}" limit="all"}}
{{#foreach posts}}
<div class="kk34 grid-item" style="margin-bottom: 25px;">
<div class="common-news-item">
<a href="{{url}}">
<div class="common-news-item-img">
<img src="{{img_url feature_image size="small"}}"
data-src="{{img_url feature_image size="small"}}" alt="{{title}}"
title="{{title}} - informburo.kz" width="930" height="525" class="lazy-loaded"></div>
{{#has tag="#foto"}}
<span class="video-icon"><i class="fa fa-camera" aria-hidden="true"></i></span>
{{else has tag="#video"}}
<span class="video-icon"><i class="fa fa-play" aria-hidden="true"></i></span>
{{else has tag="#longread"}}
<span class="video-icon"><i class="fa fa-newspaper-o" aria-hidden="true"></i></span>
{{else has tag="#risunok"}}
<span class="video-icon"><i class="fa fa-paint-brush" aria-hidden="true"></i></span>
{{/has}}
<div class="common-news-item-text">
<span class="common-news-item-desc dot-ellipsis dot-resize-update dot-height-70"
style="overflow-wrap: break-word;">{{title}}</span>
<span class="iart" artnum="91308"> <i class="fa fa-time" aria-hidden="true"></i>
<acronym class="artview_counter_91308">{{reading_time}}</acronym>
</span>
</div>
</a>
</div>
</div>
{{/foreach}}
{{/get}}
I saw similar bug on websites based on ghost cms, hope it helps somehow. Maybe the problem is in infinitescroll.js ?
Yea I would say the problem is either in the library or the javascript options you’re providing it. Is it a generic infinite scrolling library you’re using, or one specifically for Ghost? I did a quick search and found this GitHub repo which has the code and helpful docs to add infinite scrolling to a Ghost blog GitHub - gorda0/ghost-blog-infinite-scroll: Just an infinite scroll for ghost blog using jquery
it is the one specifically for Ghost and i used the code from link but it didn’t help me at all.
1 Like
Damn, are you able to share the site you’re trying to implement it on?
I see. The next series of posts are getting taken from this url https://admin.informburo.kz/tag/cards/page/2/ but that page appears to have the same posts on it. Do you have some kind of redirect setup? If not then maybe you don’t have enough posts yet to trigger the infinite scrolling? The js may need a check to see if there are more posts yet
I added more than 10 posts to this tag the same situation …
But in default theme casper everything works fine …
Maybe is it because of get helper or something like that?
Did you check your redirects file? It could be conflicting with the pagination urls
I’ve switched theme to default Casper theme check it https://admin.informburo.kz/tag/cards/
And it works properly
The code in tag.hbs:
{{!-- The main content area --}}
{{#get "posts" include="tags" filter="primary_tag:{{slug}}" limit="all"}}
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
What am I doing wrong?) Should i use partials to render post templates?
You might make more progress by comparing you theme code with the code in Casper. Casper is open source on GitHub so feel free to dig through it and see what you might be doing wrong GitHub - TryGhost/Casper: The default theme for Ghost
Did you ever fix this, @Tim_Larkin? I’m encountering it currently as well. It’s got to do with the #get helper which isn’t paginated, I guess…