How can I use ajax to create a "Load more" button to load more list items?
I have a list similarly to the one used in this question: jQuery load first 3 elements, click "load more" to display next 5 elements
This is how mine looks like:
product-list.liquid (custom Shopify code)
<ul id="product-container">
{% for product in collections.all.products = 1 %}
<li>
<a href="{{ product.url }}" class="product">
<img src="{{ product.featured_image.src }}" alt="{{ product.featured_image.alt }}" class="image-border-style" width="500" height="500">
</a>
</li>
{% endfor %}
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
I use the "{% for product in ... %}" function in order to create list items without having to manually set up all the items and their properties. I had to abandon manual set up to include special Shopify code that changes item properties automatically.
In theme.liquid, I have this javascript:
<script>
$(document).ready(function () {
// Load the first 5 list items from another HTML file
//$('#product-container').load('externalList.html li:lt(5)');
$('#product-container li:lt(5)').show();
$('#showLess').hide();
var items = 50;
var shown = 5;
$('#loadMore').click(function () {
$('#showLess').show();
shown = $('#product-container li:visible').size()+5;
if(shown< items) {$('#product-container li:lt('+shown+')').show();}
if(shown= items) {$('#loadMore').hide();}
});
$('#showLess').click(function () {
$('#product-container li').not(':lt(5)').hide();
$('#loadMore').show();
$('#showLess').hide();
});
});
</script>
What I want to do
My current javascript only shows/hides list items, but I want to load them similarly to Facebook newsfeed and Google images - not automatically, but with a "load more" button.
For example, to load the first 5 to 10 list items, and then load 5 to 10 more items after pressing a "Load more" button.
Purpose
The purpose of the function would be to increase initial loading speed of the website by loading only a specific number of list items, and load more on demand.
How can I use ajax to create a "Load more" button to load more list items?
