Skip to content

Instantly share code, notes, and snippets.

@symonny
Last active August 29, 2015 14:04
Show Gist options
  • Save symonny/2bf75c1897f94d89e2b4 to your computer and use it in GitHub Desktop.
Save symonny/2bf75c1897f94d89e2b4 to your computer and use it in GitHub Desktop.
Autoscroll for collection page - Shopify
{% comment %}
<a href="#" class="scrollup"></a>
{% endcomment %}
<section class="content content-area">
{% include 'breadcrumbs' %}
{% capture collection_url %}{% if collection.url.size == 0 %}/collections/all{% else %}{{ collection.url }}{% endif %}{% endcapture %}
<div class="page-title">
<span class="label">{{ collection.title }}</span>
{% if collection.all_tags.size > 0 %}
<div class="tags-wrap preload">
<select class="coll-filter styled-select tags-dropdown">
<option value="">All</option>
{% for tag in collection.all_tags %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
<ul class="tags">
{% for tag in collection.all_tags %}
<li class="tag show">{{ tag | link_to_tag: tag }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{% paginate collection.products by settings.products-per-page %}
{% if collection.products.size == 0 %}
<p class="empty">No products in this collection</p>
{% else %}
{% if collection.description.size > 0 or settings.collection-top-pagination %}
{% if collection.description.size > 0 or paginate.previous or paginate.next%}
<div class="collection-header clearfix">
<div class="description rte">{{ collection.description }}</div>
</div>
{% endif %}
{% endif %}
<ul class="paginated-products product-list {{ settings.products-per-row }}">
{% for product in collection.products limit: settings.products-per-page %}{% include 'product-item' %}{% endfor %}
</ul>
{% endif %}
{% if paginate.next %}
<div id="more-products"><p>&darr; <a href="{{ paginate.next.url }}">More</a></p></div>
{% endif %}
<div id="product-list-foot"></div>
{% endpaginate %}
</section>
{{ 'jquery.ba-dotimeout.min.js' | asset_url | script_tag }}
<script type="text/javascript">
var QueryString = function(url){
var segments = url.split('?');
if(segments.length>1){
var query = segments[1].split('&');
if (query == "") return {};
var b = {};
for (var i = 0; i < query.length; ++i)
{
var p=query[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
}
return {};
} ;
var getNextPageInfo = function (){
var info = {};
info.nextUrl = scrollMoreHref.length > 0 ? scrollMoreHref.attr("href") : null;
info.nextPage = info.nextUrl != null ? parseInt("10", QueryString(info.nextUrl).page) : null;
return info;
};
var incrementNextPageInfo = function (nextPageInfo){
var info = {};
info.nextPage = nextPageInfo.nextPage + 1;
info.nextUrl = nextPageInfo.nextUrl.replace('page=' + nextPageInfo.nextPage, 'page='+info.nextPage);
scrollMoreHref.attr("href", info.nextUrl);
return info;
};
var pInfScrLoading = false;
var pInfScrDelay = 200;
var scrollNode = $('#more-products').last();
var scrollMoreHref = $('#more-products p a').last() ;
var NextPageInfo = getNextPageInfo();
function ScrollExecute() {
var supportsScroll = $(document).height() - 800 < ($(document).scrollTop() + $(window).height());
if(!pInfScrLoading && supportsScroll) {
if(scrollNode.length > 0 && NextPageInfo.nextPage != null) {
$.ajax({
type: 'GET',
url: NextPageInfo.nextUrl,
beforeSend: function() {
pInfScrLoading = true;
$('<div id="more-products"></div>').insertAfter($('.paginated-products').last()).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
scrollNode.hide();
},
error:function(error){pInfScrLoading = false;},
success: function(data) {
// remove loading feedback
$('.paginated-products').last().next().remove();
var filteredData = $(data).find(".paginated-products");
if(filteredData.length>0){
{% if settings.quick_shop_enabled %}
if ($(window).width() >= 959) {
filteredData.find(".quick_shop").leanModal();
}
{% endif %}
//switch image on mouwse hover
/*filteredData.find('.single-product .image').each(function(){
if($(this).find('img').length > 1) {
$(this).hover(function(){
$(this).find('.img2').stop(true,true).fadeIn("1000");
$(this).find('.img1').stop(true,true).fadeOut("1000").css("display", "none");
}, function(){
$(this).find('.img2').stop(true,true).fadeOut("1000").css("display", "none");
$(this).find('.img1').stop(true,true).fadeIn("1000");
});
}
});*/
filteredData.insertBefore( $("#product-list-foot") );
//update the href for next page
NextPageInfo = incrementNextPageInfo(NextPageInfo);
}else{
NextPageInfo.nextUrl = null;
NextPageInfo.nextPage = null;
}
pInfScrLoading = false;
},
dataType: "html"
});
}
}
};
$(document).ready(function () {
$(window).scroll(function(){
$.doTimeout( 'scroll', pInfScrDelay, ScrollExecute);
if( $(document).height() - 800 > $(document).scrollTop() + $(window).height() ) {
pInfScrDelay = 250;
}
});
{%comment %}
//scrollarrow
var scrollUp = $('.scrollup');
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
scrollUp.click(function(e){
$('body,html').animate({ scrollTop: "0" }, 600 );
e.preventDefault();
});
{% endcomment %}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment