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

【问题标题】：Shopify: Infinite scroll limiting to 48 products?Shopify：无限滚动限制为 48 种产品？
【发布时间】：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 个产品

标签： javascript ajax shopify shopify-template

【解决方案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 %}

【讨论】：