Last active
June 21, 2021 21:01
-
-
Save DanWebb/d4401ad7d43ce8ca02d5 to your computer and use it in GitHub Desktop.
Shopify infinite scrolling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
didn't do anything for me. Using Narrate theme.