How can I implement infinite scroll on Focal theme collection pages?

paul_carlson_r
Shopify Partner
6 0 1

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

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:

 

<link rel="preload" as="script" href="{{'ajaxinate.min.js' | asset_url }}">​

.

 

I am quickly running out of ideas, so if anyone has one I would be greatly appreciated to any and all advice.
Replies 5 (5)

KetanKumar
Shopify Partner
36843 3636 11978

@paul_carlson_r 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
paul_carlson_r
Shopify Partner
6 0 1

Thank you for your offer.  This is a client site currently under development and as such, I can not share any links outside of the current working group.  Any ideas or directions would be greatly appreciated.

Denizthemenace
Shopify Expert
28 2 7

Hi Paul,

did you find a fix? I need exactly the same?

Regards

Zin

Alex0815
Tourist
11 1 3

Hi, are there any possibility to integrate infinity scrolling in the focal theme? I am looking at this as well...?!

lielust
Visitor
1 0 0

Did you find any solution to this issue ?