Shopify：无限滚动限制为 48 种产品？

Posted 2023-02-15

【中文标题】Shopify：无限滚动限制为 48 种产品？

【英文标题】：Shopify: Infinite scroll limiting to 48 products?

【发布时间】：2021-11-29 19:40:22

【问题描述】：

我想在我的产品集合页面上实现无限滚动，为此我在我的 collection-template.liquid 文件中进行了编码：

<div id="js-ajax-loop" class="ProductList ProductList--grid Grid" data-mobile-count=" mobile_items_per_row " data-desktop-count=" desktop_items_per_row ">
    % for product in collection.products %
      % if product.available %
        <div class="Grid__Cell 1/ mobile_items_per_row --phone 1/ tablet_items_per_row --tablet-and-up 1/ desktop_items_per_row --% if section.settings.filter_position == 'drawer' %lap-and-up% else %desk% endif %">
          %- render 'product-item', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%
        </div>
      % endif %
    % endfor %
  </div>
  <div id="js-ajax-pagination">
    % if paginate.next %
      <a href=" paginate.next.url ">Loading More</a>
    % endif %  
  </div>

我还在 custom.js 文件中添加了以下内容：

  document.addEventListener("DOMContentLoaded", function() 
    var endlessScroll = new Ajaxinate(
      container: '#js-ajax-loop',
      pagination: '#js-ajax-pagination'
    );
  );

这似乎有效。但是，我达到了只能滚动浏览多达 48 种产品的限制。

我在我的架构中看到我有 Product per Page 的设置：

"type": "range",
"id": "grid_items_per_page",
"label": "Products per page",
"min": 4,
"max": 100,
"step": 4,
"default": 16

我已从 48 增加到 100。我还在 Shopify it's self 中调整了此设置：

但仍然只有 48 个产品（总共 80 个有效产品）出现。

有人知道我可以做些什么来解决这个问题并让它显示所有产品吗？

（PS：我正在为此修复一个非实时主题。调整实时主题的计数可以解决它吗？）

【问题讨论】：

您需要分享工作示例以检查 AJAX 调用的实际情况，但默认一旦没有分页，默认返回 50 个产品

【参考方案1】：

不确定这是否是最正确的答案，但我能够通过用分页包装它来实现它，例如：

<div id="js-ajax-loop" class="ProductList ProductList--grid Grid" data-mobile-count=" mobile_items_per_row " data-desktop-count=" desktop_items_per_row ">
    % paginate collection.products by 100 %
    % for product in collection.products %
      % if product.available %
        <div class="Grid__Cell 1/ mobile_items_per_row --phone 1/ tablet_items_per_row --tablet-and-up 1/ desktop_items_per_row --% if section.settings.filter_position == 'drawer' %lap-and-up% else %desk% endif %">
          %- render 'product-item', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%
        </div>
      % endif %
    % endfor %
    % endpaginate %