tara-m of Underwaterpistol Code Snippets
1/30/2019 - 2:50 PM

Infinite Scroll

<!-- 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">&darr; <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>