第 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