Waypoint Infinite Scroll 的 Wagtail 分页问题

Question

我已经 Waypoint Infinite Scroll 在艺术画廊项目的常规页面模型上实现得很好。可以使用复选框将这些项目添加到商店。然后，我使用“商店”页面来过滤标记为“特价”的画廊商品。出于某种原因，当无限滚动功能似乎在商店页面上触发得很好但没有呈现新项目时。

我从服务器收到 200 响应，并且没有错误记录到控制台：

[12/Dec/2020 11:40:46] "GET /shop/?page=2 HTTP/1.1" 200 26

它使用的页面：

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

它不起作用的商店页面：

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 %}

基本分页也能正常工作。如果我单击超链接，它将加载第 2 页。

Answer 1

我的问题当然很简单。在 Shop class 我添加了这一行

ajax_template = "shop/shop_item_ajax.html"

来自之前对 ajax 功能的研究，该模板是一个空文件，我从未使用过，因此没有呈现任何内容。我删除了那条线，Waypoint Infinite 按照宣传的方式工作。

Waypoint Infinite Scroll 的 Wagtail 分页问题

Wagtail Pagination issue with Waypoint Infinite Scroll

django

infinite-scroll

wagtail

waypoint