Shopify: Infinite scroll limiting to 48 products?-CodePudding

I want to implement infinite scroll on my product collections page and to that effect I have coded to following in my collection-template.liquid file:

<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>

I have also added the following in my custom.js file:

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

This seems to work. However, I hit a limit of only being able to scroll through up to 48 products.

I see in my schema I have the setting for Product per Page:

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

Which I have increased from 48 to 100. I have also tweaked this setting in Shopify it's self:

But still only 48 products (out of a total of 80 active) appear.

Would anyone know what I could do to fix this and have it display all products?

(PS: I'm working on a non-live theme for this fix. Would adjusting the count on the live theme fix it?)

CodePudding user response：

Not sure if this is the most correct answer but I was able to get this working by wrapping it with paginate, eg:

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