<!-- collection info -->
<div class="collection-info rte">
<h1>{{ collection.title }}</h1>
<p>{{ collection.description }}</p>
</div>
<!-- Show 15 products at a time -->
{% paginate collection.products by 15 %}
<ul class="collection-matrix">
{% for product in collection.products %}
{% include 'product-grid-item' with product %}
{% endfor %}
{% if paginate.next %}
<li class="more">↓ <a href="{{ paginate.next.url }}">More</a></li>
{% endif %}
</ul>
<div id="product-list-foot"></div>
{% endpaginate %}
<!-- product-grid-item.liquid - put this in a separate snipped or use existng in theme -->
<figure id="product-{{ forloop.index | plus:paginate.current_offset }}" class="product product-item">
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" class="product-img" />
<figcaption class="collection">
<div class="product-caption">
<h3><a href="{{ product.url | within: collection }}" class="product-name">{{ product.title }}</a></h3>
<span class="product-price">{{ product.price | money }}</span>
</div>
</figcaption>
</a>
</figure>
<!-- end product-grid-item.liquid -->
<!-- Required scripts download from https://github.com/cowboy/jquery-dotimeout -->
{{ 'jquery.ba-dotimeout.js' | asset_url | script_tag }}
<script>
var pInfScrLoading = false;
var pInfScrDelay = 100;
function pInfScrExecute() {
if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
var loadingImage;
pInfScrNode = $('.more').last();
pInfScrURL = $('.more a').last().attr("href");
if(!pInfScrLoading && pInfScrNode.length > 0 && pInfScrNode.css('display') != 'none') {
$.ajax({
type: 'GET',
url: pInfScrURL,
beforeSend: function() {
pInfScrLoading = true;
loadingImage = pInfScrNode.clone().empty().append('<img src=\"http://cdn.shopify.com/s/files/1/0068/2162/assets/loading.gif?105791\" />');
loadingImage.insertAfter(pInfScrNode);
pInfScrNode.hide();
},
success: function(data) {
// remove loading feedback
pInfScrNode.next().remove();
var filteredData = $(data).find(".collection-matrix");
filteredData.insertBefore( $("#product-list-foot") );
loadingImage.remove();
pInfScrLoading = false;
},
dataType: "html"
});
}
}
}
$(document).ready(function () {
$(window).scroll(function(){
$.doTimeout( 'scroll', pInfScrDelay, pInfScrExecute);
if( $(document).height() - 800 > $(document).scrollTop() + $(window).height() ) {
pInfScrDelay = 100;
}
});
});
</script>