javascript - 实现无限/无限滚动 Bigcommerce Stencil 类别列表

Question

我想知道如何在类别页面上的大型商业模板框架上实现无限滚动，因为某些原因它没有在类别页面底部显示分页。

如果可以使用 javascript 那么请建议我如何使用大型商业模板框架实现此功能

这是我的网站 http://silverforte.com/categories

  <main class="page-content" id="product-listing-container">
    {{#if category.products}}
        {{> components/category/product-listing}}
    {{else}}
        <p>{{lang 'categories.no_products'}}</p>
    {{/if}}
</main>

谢谢

Answer 1

您当然可以进一步优化它，但这涵盖了基本思想。

与 BigCommerce 无关，延迟加载 AJAX 请求如下所示:

$.ajax({
    url: "your url here",
    type: "Post",
    success: function(response){
        // handle your success callback here
        $("img.lazy").lazyload({ 
              effect : "fadeIn"
        });
    }
});

这并不完美，因为您需要加载后续页面并翻阅类别本身。我将根据 window.location.pathname 或 window.location.href 设置一个变量并修改该字符串以增加页码并将其用作 ajax 请求网址。

或者，您可以让 JS 找到下一个选择器并使用它来构建 URL 请求。

查看 http://infiniteajaxscroll.com/以获得更好的插件与 BC 一起使用。