Infinite scrolling retina theme

Solved
Highlighted
Tourist
5 1 1

Has anyone been able to put infinite scrolling on the collection page with Retina theme?

I've been trying to get this working but i'm getting issues like first page duplicating and random gaps in the collections as pages load.

https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

 

 

1 Like
Highlighted
Shopify Partner
7501 1036 2600

@MGerace 

Thanks 

can you please flow this step 

https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
5 1 1

This is an accepted solution.

For anyone else using retina here is the solution

add this to the bottom of collection.liquid

script>
document.addEventListener("DOMContentLoaded", function() {
var endlessScroll = new Ajaxinate({
container: '#Huratips-Loop',
pagination: '#Huratips-Pagination'
});
});
</script>

Remove red from below in pagination.liquid

{% if paginate.pages > 1 %}
<div class="{% if sidebar %}twelve{% else %}sixteen{% endif %} columns">
<div class="section clearfix">
<div class="paginate">
{{ paginate | default_pagination }}
</div>
</div>
</div>
{% endif %}

 

and replace with the green text

 

{% if paginate.pages > 1 %}
<div class="{% if sidebar %}twelve{% else %}sixteen{% endif %} columns">
<div class="section clearfix">
<div id="Huratips-Pagination">
{% if paginate.next %}
<a href="{{ paginate.next.url }}">Loading More</a>
{% endif %}
</div>
</div>
</div>
{% endif %}

 

add what is in green to Product-loop.liquid

 

<div class="products">
<div id="Huratips-Loop" >
{% for product in products limit: forLimit %}

{% capture thumbnail_view %}
{% if products_per_row == 2 %}
{% cycle collection_group_thumb: 'alpha', 'omega' %}
{% elsif products_per_row == 3 %}
{% cycle collection_group_thumb: 'alpha', '', 'omega' %}
{% elsif products_per_row == 4 %}
{% cycle collection_group_thumb: 'alpha', '', '', 'omega' %}
{% endif %}
{% endcapture %}

{% capture mobile_thumbnail_view %}
{% cycle collection_group_mobile: 'even', 'odd' %}
{% endcapture %}

{% if product.id != skip_product.id %}
{% render 'product-thumbnail',
product: product,
products_per_row: products_per_row,
thumbnail_view: thumbnail_view,
mobile_thumbnail_view: mobile_thumbnail_view,
sidebar: sidebar
%}
{% if products_per_row == 2 %}
{% cycle collection_group: '', new_row %}
{% elsif products_per_row == 3 %}
{% cycle collection_group: '', '', new_row %}
{% elsif products_per_row == 4 %}
{% cycle collection_group: '', '', '', new_row %}
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>

 

 

0 Likes
Highlighted
Shopify Partner
7501 1036 2600

@MGerace 

Thanks for update 

do you have any issues?

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes