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.
Thanks
can you please flow this step
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’
});
});
Remove red from below in pagination.liquid
{% if paginate.pages > 1 %}
{{ paginate | default_pagination }}
and replace with the green text
{% if paginate.pages > 1 %}
{% if paginate.next %}
Loading More
{% endif %}
add what is in green to Product-loop.liquid
{% 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 %}
Hello there,
do you think this would work out also at Archetype theme? I’m also looking for such a solution.
Thank you for any recommendations!