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

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

点击这里查看视频教程

有帮助? 请 up 主喝 加啡(页面右侧)


这次的教程我将教你如何在 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