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

Question

我想在我的产品系列页面上实现无限滚动，为此我在我的系列-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 个产品的限制。

我在我的架构中看到我有 每页产品:

的设置

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

我已经从 48 增加到 100。我还在 Shopify 中调整了这个设置它是自己的：

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

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

(PS：我正在为此修复开发一个非实时主题。调整实时主题的计数是否可以修复它？)

Answer 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 %}

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

Shopify: Infinite scroll limiting to 48 products?

javascript

ajax

shopify

shopify-template