Skip to content

Instantly share code, notes, and snippets.

@DanWebb
Last active June 21, 2021 21:01
Show Gist options
  • Save DanWebb/d4401ad7d43ce8ca02d5 to your computer and use it in GitHub Desktop.
Save DanWebb/d4401ad7d43ce8ca02d5 to your computer and use it in GitHub Desktop.
Shopify infinite scrolling
<!--
a new template will need to be created for this file then this will
be what's called from the ajax by sending it with a property of
view:*template name*.
-->
{% layout none %}
{% paginate items by 5 %}
{% for item in items %}
<!-- item html -->
{% endfor %}
{% endpaginate %}
var Scroll = (function($, doc, win) {
var options = {};
var inprog = false;
var currPos = 0;
var maxPos = 0;
function getNextPage() {
options.ajaxData['page'] = options.page;
options.page += 1;
return $.ajax(this.url, {
data: options.ajaxData
});
}
function loadMore() {
getNextPage().done(function(data) {
$(options.container).append(data);
inprog = false;
});
}
return function(data) {
options.page = data.page || 2;
options.offset = data.offset || 100;
options.container = data.container || '.scroll-container';
options.url = data.url;
options.ajaxData = data.ajaxData;
var $doc = $(doc);
var $win = $(win);
$doc.scroll(function(){
currPos = $doc.scrollTop()+$win.height();
maxPos = $doc.height()-options.offset;
if(currPos>=maxPos && inprog===false) {
inprog = true;
loadMore();
}
});
}
})($, document, window);
// Example usage
Scroll({
url: '/blogs/news',
ajaxData: { view: 'blog-ajax' },
offset: 500
});
@luxendary
Copy link

didn't do anything for me. Using Narrate theme.

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