Skip to content

Instantly share code, notes, and snippets.

@tjunxiang92
Created July 27, 2017 06:01
Show Gist options
  • Save tjunxiang92/eaa7c7995615a076f7e967eabd66edb6 to your computer and use it in GitHub Desktop.
Save tjunxiang92/eaa7c7995615a076f7e967eabd66edb6 to your computer and use it in GitHub Desktop.
Infinite Scroll for Shopify
<!-- Add this to the bottom of theme.liquid -->
<script>
var isActive = false;
var index = 1;
var maxPages = 0;
function ScrollExecute() {
if(!isActive && $(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
isActive = true;
scrollURL = $('.next a:eq(0)').last().attr('href');
scrollURL = scrollURL.substr(0, scrollURL.indexOf('=') + 1) + (++index);
console.log(scrollURL);
if(index <= maxPages) {
$.ajax({
type: 'GET',
url: scrollURL,
success: function(data) {
// remove loading feedback
var filteredData = $(data).find(".product");
$(".product").first().parent().append(filteredData);
isActive = false;
},
dataType: "html"
});
}
}
}
$(document).ready(function () {
maxPages = parseInt($('.page a').last().text());
console.log(maxPages);
$('.pagination').hide();
$(window).scroll(function(){
$.doTimeout( 'scroll', 200, ScrollExecute);
});
});
</script>
@luxendary
Copy link

Hello,

I'm Using a Narrate theme and the script doesn't seem to do anything...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment