Infinite Scroll (endless scrolling)

Highlighted
Excursionist
14 0 12

Thanks a lot Ninthony, it is crystal clear, working for me now :)  I couldn't figure out how to make this plugin work when following the "basic" instructions on the plugin website. Thanks again, much appreciated.

0 Likes
Highlighted
New Member
7 0 0

Thanks for a great guide, Ninthony. It works great, BUT we have one problem. When you go back to the collection page after checking a product you are not coming back to the same place at the collection page. We are always coming back to the first collection page even if we had autoscrolled down to the third page.

 

Is it something we are doing wrong?

 

 

0 Likes
Highlighted
Excursionist
24 2 3

@Ninthony 

 

How would I implement this on the Minimal theme? I followed this up until adding it to the collection-template.liquid. Can you please assist? Thank you! 

0 Likes
Highlighted
Tourist
4 0 2

Superb! Works like a charm on Supply theme!

0 Likes
Highlighted
New Member
4 0 0

hi, 

I successfully add the infinite scroll ( https://elkfox.github.io/Ajaxify/) to the debut theme after trying so many time seen I don't have any coding knowledge before I try to open a web store, and I find a way add the loading gif when scroll. 

<div id="AjaxinatePagination">      {% if paginate.next %}
      	<a href="{{ paginate.next.url }}">Loading More</a>
          <img src="{{ 'ajax-loader.gif' | asset_url }}">      {% endif %}
    </div>

I want to make the loading gif stay center no matter what, but I don't know how, can anyone help me on it?

thank you so much.

my website url : www.tintin.hk

0 Likes
Highlighted
Shopify Partner
1280 169 402

You can add this at the bottom of your theme.scss.liquid file:

#AjaxinatePagination {
    text-align: center;
}
If my solution helped you, please like and accept as solution!
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
Highlighted
Tourist
8 0 1

Hi @donsuper where did you post that code to change the loading message?

 

I am also trying to change the loading message to a.gif but it is not working for me.

 

Thanks in advance! 

0 Likes
Highlighted
Tourist
8 0 1

Nevermind - solved it. had to set the ajax loadingText parameters to nothing

0 Likes
Highlighted
New Member
1 0 0

Hi Ninthony,

 

I tried adding in theme.js.liquid and modified collection-template and theme.liquid files. Scrolling is still not working.

Do you have any write up on supply theme for this ?



 

0 Likes
Highlighted
Shopify Partner
1280 169 402

I'll take a look at Supply in a bit and make up a small tutorial for you.

If my solution helped you, please like and accept as solution!
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