如何將無限滾動添加到 BigCommerce 類別頁面

Question

我正在嘗試向 BigCommerce 的類別頁面添加無限滾動。 無限滾動

我已將 JS 腳本上傳到 webdav 上的內容文件，並在category.html頁面上插入了 HTML 代碼，但它不起作用。 我想是因為它是一個被注入base.html的部分頁面。 我已將腳本添加到該頁面但無濟於事。 我不確定如何按照說明中所示使用 jQuery 或 JavaScript 調用腳本。

任何人都可以闡明一下嗎？

Answer 1

嘗試在 grid.html（或為主題中的類別產品創建<ul>任何模板文件）上初始化 Infinite Scroll。 下面是一個使用 HTML 初始化方法的示例，應用於 Cornerstone 的 grid.html 文件：

<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-link", "append": ".product", "history": false }'>
{{#each products}}
<li class="product">
    {{>components/products/card show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
</li>
{{/each}}

請確保您在 base.html 的 {{head}} 部分中引用了 Infinite Scroll .js 文件，或者使用 WebDAV 中文件的路徑，或者使用 CDN 鏈接：

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script> 

編輯：在用戶報告現在正在復制類別產品的第一頁后更新。 特定於 Next 鏈接的新標記制作路徑：

data-infinite-scroll='{ "path": ".pagination-item--next .pagination-link", "append": ".product", "history": false }'

Answer 2

一步一步的信息在這里。

有兩種方法可以在您的主題中安裝無限滾動。

1. 直接，我們可以使用 CDN URL 包含無限滾動。 我們需要在標簽內的代碼下方添加。

   <script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>

2. 安裝無限滾動的 NPM 包。

使用 npm 安裝：

npm install infinite-scroll

用紗線安裝：

yarn add infinite-scroll

注意：直接方法可能會影響一些問題。 某些瀏覽器不允許使用單獨的網絡提取調用。 我們更喜歡使用 NPM 打包方式。

Answer 3

npm 是使用無限滾動的最佳方式

使用 npm 安裝：

npm install infinite-scroll

用紗線安裝：

yarn add infinite-scroll