Skip to content

Instantly share code, notes, and snippets.

@DanWebb
Last active December 5, 2025 08:53
Show Gist options
  • Select an option

  • Save DanWebb/d4401ad7d43ce8ca02d5 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

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