Infinite load products on scroll

ajaxLoadProducts.js

	var ajaxLoadPageIndex = 1;

	function ajaxLoadProducts() {
		if ($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
			collectionURL = $('.collection-main').attr('data-collection-url');
			collectionPages = $('.collection-main').attr('data-collection-pages');
			++ajaxLoadPageIndex;

			if (ajaxLoadPageIndex <= collectionPages) {
				$.ajax({
					type: 'GET',
					url: collectionURL + '?page=' + ajaxLoadPageIndex,
					beforeSend: function() {
						$('.collection-main__loader').fadeIn();
					},
					success: function(data) {
						var filteredData = $(data).find('.product');
						var currentScrollPosition = $(document).scrollTop();
						var i = 1;

						filteredData.insertBefore($('.collection-main__loader'));	
						
						$(document).scrollTop(currentScrollPosition);

						$('.product').each(function(){
							$(this).attr('data-product-index', i++);
						});
					},
					complete: function() {
						findLastElementInRow();
						bindQuickCart();
						$('.collection-main__loader').fadeOut();
					},
					dataType: 'html'
				});
			}

		}
	}

collection.infinite-load.liquid

{%- if current_tags.size > 0 -%}
	{%- capture current_tags_url -%}
		{%- for tag in current_tags -%}
			+{{ tag | handleize }}
		{%- endfor -%}
	{%- endcapture -%}
	{%- assign current_tags_url = current_tags_url | replace_first: '+', '/' -%}
{%- endif -%}

<div class="collection-main" data-collection-url='{{ collection.url }}{{ current_tags_url }}' data-collection-pages="{{ paginate.pages }}">
	{% for product in collection.products %}
		{% include 'product-loop-item' product: product %}
	{% endfor %}
	<div class="collection-main__loader">
		<img src="{{ 'loader.gif' | asset_url }}" alt="Loading" />
		<h5>One moment please</h5>
	</div>
</div>