My current project is using the focal theme, and I need help with implementing an infinite scroll on collection pages. I have looked around and followed several tutorials that are all about the same. The one that seems to get referenced the most is this one: https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages.html.
When I follow this guide my code ends up looking like this:
<div id="huratips-loop">
<div class="product-list__inner">
{%- assign desktop_number_of_products_minus_one = section.settings.desktop_products_per_row | minus: 1 -%}
{%- assign gap_width = 24.0 | divided_by: section.settings.desktop_products_per_row | times: desktop_number_of_products_minus_one -%}
{%- capture sizes_attribute -%}(max-width: 740px) calc({{ 100.0 | divided_by: section.settings.mobile_products_per_row | ceil }}vw - 24px), calc((min(100vw - 80px, 1520px) - {{ sidebar_width }}px) / {{ section.settings.desktop_products_per_row }} - {{ gap_width | ceil }}px){%- endcapture -%}
{% assign collectionCount = 0 %}
{%- for product in collection.products -%}
{%- render 'product-item', product: product, collection: collection, block: block, sizes_attribute: sizes_attribute, reveal: settings.stagger_products_apparition -%}
{%- endfor -%}
</div>
</div>
</product-list>
<div id="Huratips-Pagination">
{% if paginate.next %}
<a href="{{ paginate.next.url }}">Loading More</a>
{% endif %}
</div>
{%- endpaginate -%}
{%- if section.settings.promotion_position == 'bottom' -%}
{{- promotion_blocks -}}
{%- endif -%}
{%- else -%}
<div class="empty-state">
{%- if collection.all_products_count == 0 -%}
<h3 class="heading h4">{{ 'collection.general.empty_title' | t }}</h3>
<p>{{ 'collection.general.empty_label' | t }}</p>
<div class="button-wrapper">
<a href="{{ routes.all_products_collection_url }}" class="button button--primary">{{ 'collection.general.empty_button' | t }}</a>
</div>
{%- else -%}
<h3 class="heading h4">{{ 'collection.general.no_results_title' | t }}</h3>
<p>{{ 'collection.general.no_results_label' | t }}</p>
<div class="button-wrapper">
<a href="{{ collection.url }}?sort_by={{ collection_sort_by }}" data-action="clear-filters" class="button button--primary">{{ 'collection.general.no_results_button' | t }}</a>
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</product-facet>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded",function(){
const endlessCollection = new Ajaxinate({
container: '#huratips-loop',
pagination: '.infinite_next'
});
})
</script>
I have also seen references to where I need to adjust my pagination snippet which is:
{%- if paginate.pages > 1 -%}
<page-pagination {% if use_ajax %}ajax{% endif %} class="pagination">
<nav class="pagination__nav">
{%- if paginate.previous -%}
<a class="pagination__nav-item" rel="prev" aria-label="{{ 'general.pagination.previous_page' | t }}" data-page="{{ paginate.current_page | minus: 1 }}" href="{{ paginate.previous.url }}{{ hash }}">
{%- render 'icon' with 'nav-arrow-left', direction_aware: true -%}
</a>
{%- endif -%}
{%- for part in paginate.parts -%}
{%- if part.is_link -%}
<a href="{{ part.url }}{{ hash }}" data-page="{{ part.title }}" class="pagination__nav-item heading heading--small" aria-label="{{ 'general.pagination.go_to_page' | t: page: part.title }}">{{ part.title }}</a>
{%- else -%}
<span class="pagination__nav-item heading heading--small" {% if part.title == paginate.current_page %}aria-current="page" {% endif %}>{{ part.title }}</span>
{%- endif -%}
{%- endfor -%}
{%- if paginate.next -%}
<div class="infinite_next"/>
<a class="pagination__nav-item" rel="next" aria-label="{{ 'general.pagination.next_page' | t }}" data-page="{{ paginate.current_page | plus: 1 }}" href="{{ paginate.next.url }}{{ hash }}">
{%- render 'icon' with 'nav-arrow-right', direction_aware: true -%}
</a>
{%- endif -%}
</nav>
</page-pagination>
{%- endif -%}
I downloaded and copied ajaxinate.min to my assets folder, and then inside my theme.liquid I pasted this near the top:
.
I am quickly running out of ideas, so if anyone has one I would be greatly appreciated to any and all advice.
