第 124 期 Dawn 产品系列页面无尽滚动, 自动加载更多产品

点击这里查看视频教程

这次的教程我将教你如何在 Dawn 主题中添加 产品系列页面 滚动加载更多商品的功能，也就是当客户浏览到接近网页底部时，自动加载和显示下一页的商品，省去点击数字页码或者下一页按钮的操作，提升用户体验和店铺订单转化率。

本教程在 Dawn 上测试和演示，应该也同样适用于 Shopify 后续发布的 Sense Crave Craft Studio Taste Colorblock Ride 等主题，如果你用的是后面这些主题，可自行尝试。如果你看到的主题文件代码跟视频中演示的一样，那基本就能实现。

Sections ~ main-collection-product-grid.liquid

搜索：

ul id="product-grid"

在其 class 中添加：

scroll__container 

搜索：

li class="grid__item"

在其 class 中添加：

 scroll__append

在 schema 上方添加：

<script src="https://cdn.shopify.com/s/files/1/0606/0346/5936/files/infinite-scroll.pkgd.min.js"></script>
<script>
  let infScroll = new InfiniteScroll( '.scroll__container', {
  // 设置项
  path: '.pagination__next',
  append: '.scroll__append',
  history: false
  });
</script>

Snippets ~ pagination.liquid

搜索：

div class="pagination-wrapper"

添加：

 style="display: none;"

搜索：

pagination__item pagination__item--prev

在其 class 中添加：

pagination__next