I've implemented Waypoint Infinite Scroll just fine on a regular Page model for art gallery items. Those items can be added to a shop with a checkbox. I then use a Shop page to filter the gallery items that are marked as on sale. For some reason, when the infinite scroll feature seems to trigger just fine on the shop page but no new items are rendered.
I get a 200 response from the server and no errors are logged to the console:
[12/Dec/2020 11:40:46] "GET /shop/?page=2 HTTP/1.1" 200 26
The page it works with:
class Gallery(Page):
intro = RichTextField(blank=True, help_text="Text for the top of your gallery page. (Optional - recommended to leave empty for a more simplistic look.)")
content_panels = Page.content_panels + [FieldPanel('intro', classname="full")]
subpage_types = ['InstallationPage']
# parent_page_types = []
def get_context(self, request):
context = super().get_context(request)
filtered_medium = request.GET.get('medium', None)
if filtered_medium:
context['filtered'] = True
mediums = InstallationMedium.objects.filter(name=filtered_medium)
installations = InstallationPage.objects.child_of(self).order_by('-date').live().filter(mediums__in=mediums)
else:
mediums = InstallationMedium.objects.filter(installationpage__in=InstallationPage.objects.all()).distinct()
installations = InstallationPage.objects.child_of(self).order_by('-date').live()
paginator = Paginator(installations, 12)
page = request.GET.get('page')
try:
pagin = paginator.get_page(page)
except PageNotAnInteger:
pagin = paginator.get_page(1)
context['installations'] = pagin
context['mediums'] = mediums
return context
Shop page where it doesn't work:
class Shop(RoutablePageMixin, Page):
ajax_template = "shop/shop_item_ajax.html"
def get_context(self, request):
context = super().get_context(request)
shop_items = GalleryItem.objects.filter(Q(direct_sale=True) | Q(external_sale=True)).order_by('latest_revision_created_at')
paginator = Paginator(shop_items, 12)
page = request.GET.get('page')
try:
items = paginator.get_page(page)
except PageNotAnInteger:
items = paginator.get_page(1)
context['shop_items'] = items # shop_items for all items
for item in items:
print(item)
return context
main.js:
document.addEventListener('DOMContentLoaded', function() {
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loader').removeClass('d-none')
},
onAfterPageLoad: function ($items) {
$('.loader').addClass('d-none')
}
});
...
shop.html:
<div class="row justify-content-center justify-content-md-start infinite-container">
{% for item in shop_items %}
<div class="col-12 col-sm-6 col-md-4 col-xl-3 infinite-item">
<div class="row">
<div class="col d-flex justify-content-center text-center">
<h4><a href="/shop/{{ item.slug }}/">{{ item.title }}</a></h4>
</div>
</div>
</div>
{% empty %}
Nothing for now!
{% endfor %}
</div>
<div class="row justify-content-center">
<div class="loader d-none">
<div class="loader-inner ball-pulse" id="dropin-loading">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
{% if shop_items.has_next %}
<div class="row justify-content-center">
<a class="infinite-more-link" href="/shop/?page={{ shop_items.next_page_number }}">More</a>
</div>
{% endif %}
Also basic pagination works fine. If I click the hyperlink, it will load page 2.
My problem was rather simple of course. In the Shop class I had added this line
ajax_template = "shop/shop_item_ajax.html"
from a previous dive into ajax functionality, and that template was an empty file which I never ended up using, so nothing was being rendered. I removed that line and Waypoint Infinite works as advertised.