Infinite Scroll (endless scrolling)

Tourist
16 0 3

@David_Kirby wrote:

This may be helpful for those comfortable editing their themes:

https://gist.github.com/davecap/1187078/ebae13b05f80fabfd03fffa54bf79c264230120f


Hi David

 

Do you know pages that have installed the plugin you refer to? It would be great to test it before we start to implement it... 👍


0 Likes
Shopify Partner
10 0 2

Has anybody found a homebrew solution to this? I am just looking into implementing infinite scrolling on my store <https://majesticvapor.com/collections/all-coils?page=2> and would like to develop the solution myself (so no apps). It looks like this <https://infinite-scroll.com> javascript library is open source and would do the trick. Has anybody done infinite scrolling without an app that can share any advice? Thanks ~A

0 Likes
Astronaut
1069 145 256

Just implemented this on our website the other day:

 

https://elkfox.github.io/Ajaxinate/

 

Very simple, works like a charm. Let me know if you need help, you can send me a direct message.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Shopify Partner
10 0 2
New Member
4 0 0

Could one of you clever individuals help me get this implemented on my site?
im using a customized version of doubt. 

Im most unsure of where the lines need to be added in our theme files, any help is greatly appreciated.

https://elkfox.github.io/Ajaxinate/

0 Likes
Astronaut
1069 145 256

It's pretty much all outlined for you in the Getting Started section of the website. Duplicate your theme so you can implement it without any hiccups. 

 

-Press the download button to download Ajaxinate.

-Unzip the file and go into the "dist" folder and extract "ajaxinate.min" to your desktop. 

-Go to Online Store > Themes > Actions > Edit Code on your duplicated theme.

- Open your assets folder, add new asset, choose file, and select your ajaxinate.min file you just extracted to the desktop.

- Open theme.liquid in your layouts folder and paste {{ 'ajaxinate.min.js' | asset_url | script_tag }} in the head of your html, underneath the canonical url is fine:

<link rel="canonical" href="{{ canonical_url }}">
{{ 'ajaxinate.min.js' | asset_url | script_tag }}

-Open your sections folder and open collection-template.liquid

-Find your for loop, in Debut's case there are 2 depending on your settings. You need to wrap a div with the id of "AjaxinateLoop" before the forloop begins and after the forloop ends:

      <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        <div id="AjaxinateLoop"> // <----- Start Div ------>
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>
        {% else %}
          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
            <li class="grid__item">
              <div class="grid grid--uniform">
                {% for i in (1..limit) %}
                  <div class="grid__item {{ grid_item_width }}">
                    <div class="grid-view-item">
                      <a href="#" class="grid-view-item__link">
                        <div class="grid-view-item__image">
                          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="grid-view-item__meta">
                          <span class="product-price__price">$19.99</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </li>
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
        </div> // <------ End Div -------> 
      </ul>

- Do the same for product-card-list:

      <ul class="list-view-items">
        <div id="AjaxinateLoop"> // <----- Start Div ----->
        {% for product in collection.products %}
          <li class="list-view-item">
            {% include 'product-card-list', product: product %}
          </li>
        {% else %}

          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
            {% for i in (1..4) %}
              <li class="list-view-item">
                <a href="#" class="list-view-item__link">
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper">
                      <div class="list-view-item__image">
                        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>

                  <div class="list-view-item__title-column">
                    <div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                  </div>

                  <div class="list-view-item__price-column">
                    <span class="product-price__price">$19.99</span>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
        </div> // <----- End Div ------>
      </ul>

Then find your pagination, by default is says this:

 

    {% if paginate.pages > 1 %}
      {% include 'pagination' %}
    {% endif %}

Change that to this:

    <div id="AjaxinatePagination">
      {% if paginate.next %}
        <a href="{{ paginate.next.url }}">Loading More</a>
      {% endif %}
    </div>

-Finally, open your theme.js and add this to the bottom of the file:

 

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateLoop',
    pagination: '#AjaxinatePagination'
  });
});

Now checkout your collection pages, scroll to the bottom and they should keep popping up as you get to the bottom.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
New Member
4 0 0

Thank you very much, 
It seems to be almost working for me now,  but it is not actually triggering the action , So far .

The page navigator has been replaced at the bottom of the page by "Loading More" and if you click that it takes you to the second page instead of loading more items like it should.

Any advice on what iv got wrong?

Thank you again for the help so far, i really appreciate it.

0 Likes
Astronaut
1069 145 256

Any chance you can provide me with a url and password if password protected? I can check it out. I can also request access to your themes and help you out if you need it.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
4 0 0

Sure, here is a link to the preview of the theme copy iv made the changes to.

https://0k7x1yj2z5wuwmdm-2292088891.shopifypreview.com/collections/samsung-galaxy-note-9

0 Likes
Astronaut
1069 145 256

I'll check it out when I get in in the morning, it looks like you havent ran the function yet though. Did you put this at the end of your javascript file?

 

document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate({
    container: '#AjaxinateLoop',
    pagination: '#AjaxinatePagination'
  });
});
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes