I'm looking to incorporate infinite scroll on my product collections page, and I've implemented the following code 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>
In addition to this, I've included the following code in my custom.js file:
document.addEventListener("DOMContentLoaded", function() {
var endlessScroll = new Ajaxinate({
container: '#js-ajax-loop',
pagination: '#js-ajax-pagination'
});
});
Initially, everything appeared to be working fine. However, I noticed that I could only scroll through up to a maximum of 48 products.
Upon inspecting my schema, I found the setting for Products per Page:
"type": "range",
"id": "grid_items_per_page",
"label": "Products per page",
"min": 4,
"max": 100,
"step": 4,
"default": 16
Having increased this value from 48 to 100, and made adjustments within Shopify itself as well:
https://i.sstatic.net/r5JgP.png
Despite these changes, only 48 out of my total of 80 active products are being displayed.
If anyone has any insights on how I can resolve this issue and ensure all products are shown, it would be greatly appreciated.
(PS: I am currently making these modifications on a non-live theme. Would altering the count on the live theme potentially solve the issue?)