The infinite scroll is not working on debut theme

Highlighted
Shopify Partner
31 0 3

Hi guys,

I was trying to setup an infinite scroll on the product listing page on the fresh debut theme that shopify comes up with default. I have followed https://gist.github.com/davecap/1187078 , a good tutorial to achieve the infinite scroll.

I have included the requried jquery library and added the code as suggested but there is a jQuery error on the console while scrolling and the feature didn't worked.

The error say "TypeError: jQuery.doTimeout is not a function".

This is weired because the same is working with simple theme. I have tested the same on theme "Simple" and it is working but not on "debut" theme.

Did someone faced the same and got the fix for it?

If someone with the genius could help me figure out why it is not working with debut theme that would be great!!

Thanks, Hoping for the support from shopify experts..

Regards,

 

0 Likes
Highlighted
New Member
1 0 0

Navin, did you ever find a solution to your question? I also use the Debut theme and am trying to code for it to have the endless scrolling feature. 

0 Likes
Highlighted
Tourist
3 0 2

We can simply add infinite  scroll using ajaxinate plugin and following  Steps:-
1. Download ajaxinate.min.js from next github link and place file in assets folder

ajaxinate.min.js in assets folderajaxinate.min.js in assets folder
2. Open templates/collection.liquid and place line 

{{ 'ajaxinate.min.js' | asset_url | script_tag }}

3. Open section/collection-template.liquid and add line 

   
   <div id="AjaxinateLoop" >
before 
     {% for product in collection.products %}
and closing "   </div>"  tag after
  {% endfor %}.
</div>
I have added images below:
ajaxinateloop.png
closing div.png
4. Replace pagination link code with new one
Remove:-
{%- if paginate.pages > 1 -%}
      {% include 'pagination'paginatepaginate %}
    {%- endif -%}
 
place/add :-
    <div id="AjaxinatePagination">
      {% if paginate.next %}
        <a href="{{ paginate.next.url }}">Loading More</a>
      {% endif %}
    </div>
5. place java script code at the end of file section/collection-template.liquid to initiate plugin
<script>
document.addEventListener("DOMContentLoaded", function() {
  var endlessScroll = new Ajaxinate();
})
</script>
 
 Note : i have have added in grid view only . hope it will help someone
             
1 Like
Highlighted

Usually, I don't recommend our users use infinite loading for product listing pages. There are some reasons, but the most aching problem is that it will make it very difficult to reach the footer of the page.

Basically, you have 3 options to implement your product lists:

  • Infinite loading
  • Pagination
  • Use "Load more" buttons

Among those options, the "Load more" button is the optimum solution. Users decide whether they need to view more products, but don't have to reload the whole page when they need to view more.

Marketing Manager at PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group
- [Tutorial]: Build an effective homepage with PageFly.
0 Likes
Highlighted
New Member
2 0 0

@victorbui what if there could be a custom component that will show loading more.. and a ╳ button to cancel loading more products and this loading more shows only for 1/2-1 second and loads more products on the background.. then the friction that of clicking a button to load more products will also be removed and reaching the footer also wont be a difficult task.


Techie Person new to Shopify

Founder at The Pendu Store

0 Likes
Highlighted
New Member
2 0 0

It's working fine on my debut theme. Here are the steps I used for it:

1. Download the ajaxinate script (ajaxinate.min.js) from here: https://github.com/Elkfox/Ajaxinate/archive/2.0.11.zip . You can find the required script file (ajaxinate.min.js) inside the dist folder.

2. Upload the script file(ajaxinate.min.js) like this in the shopify admin: Theme > Customize > Edit Code > Assets > Add a new Asset > Upload File

3. Follow exact steps as given by @kuldeepSekhon in this discussion from Step 2.

Alternatively, you can also refer to developer guide here: https://ajaxinate.elkfox.io/getting-started#manual-installation

After the pagination is working, I would recommend to do these additional steps to make it look better visually:

1. Create a file named custom.scss.liquid inside the Assets folder

2. Inside the Layout/theme.liquid search for scss, you will find a code line that adds theme.scss.liquid, similarly just below this line, add 

{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

3. Now inside the custom.scss.liquid add these lines:

.pagination-load-more {
text-align: center;
margin-top: 24px;
}

4.  Change the code 

<div id="AjaxinatePagination">

to

<div id="AjaxinatePagination" class="pagination-load-more">

 

Now the loading more text will be centered.


Techie Person new to Shopify

Founder at The Pendu Store

0 Likes