Clone the Liebling repository and follow these steps first: https://github.com/eddiesigner/liebling/wiki/Theme-development-with-Docker
When everything is done, open your default.hbs and before </head> put this code:
Now create an archive named infinitescroll.js in your src/js folder. Open it and put this code:
import $ from 'jquery';
import lozad from 'lozad';
var page = 2;
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
var nextPage = ghostHost + 'page/' + page;
$.get((nextPage),
function (content) {
if (page <= maxPages) {
$('.l-content .l-wrapper .l-grid').append($(content).find('.m-article-card.post').fadeIn());
page = page + 1;
var observer = lozad('.lozad', {
loaded: function(el) {
el.classList.add('loaded');
}
})
observer.observe();
}
});
}
});Open the default.hbs again and import the file infinitescroll.js before </body>
Build the theme for production as described here: https://github.com/eddiesigner/liebling/wiki/Theme-development-with-Docker#production-mode
Thanks for putting this together. I might be missing something here, but by putting
infintescroll.jsin the/src/jsfolder, I get a console error sayingmysite.com/assets/js/infinitescroll.jscan't be found. When I put the file into/assts/js/then it says line 1 exception (load $ from jquery).What am I doing wrong?