实现无尽/无限滚动 BigCommerce 模板类别列表

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 请求 URL。

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

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