Hey All,
So in today's video I am gonna talk about how to setup Load more button on collection pages in shopify. Load more button enables you to load more products on same page without going next page on pagination. Very simple and easy way to add.
HTML CODE :
<input type="hidden" value="{{ paginate.next.url }}" data-next-link>
<input type="hidden" value="{{ paginate.pages }}" data-all-pages>
<input type="hidden" value="{{ paginate.current_page }}" data-this-page>
<input type="hidden" value="{{ collection.url }}" data-coll-url>
<div class="load-more_wrap">
<button class="btn js-load-more">
<span load-more-text>Load more</span>
<span class="hide" loader>
<img src="{{ 'loader.gif' | asset_url }}"/>
</span>
</button>
</div>
CSS CODE:
.load-more_wrap{
margin-top: 60px;
text-align: center;
}
.load-more_wrap img{
max-width: 25px;
}
ul.pagination{
display: none !important;
}
JavaScript CODE:
$('.js-load-more').on('click', function(){
var $this =$(this),
totalPages = parseInt($('[data-all-pages]').val()),
currentPage = parseInt($('[data-this-page]').val()),
datacollurl = $('[data-coll-url]').val();;
$this.attr('disabled', true);
$this.find('[load-more-text]').addClass('hide');
$this.find('[loader]').removeClass('hide');
var nextUrl = $('[data-next-link]').val();
var current_page_new = currentPage + 1;
var next_coll = currentPage + 2;
//alert(current_page_new)
//return false;
$.ajax({
url: nextUrl,
type: 'GET',
dataType: 'html',
success: function(responseHTML){
$('[data-next-link]').val(datacollurl + "?page="+next_coll);
$('[data-this-page]').val(current_page_new);
$('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
},
complete: function() {
if(current_page_new < totalPages) {
$this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
if(current_page_new >= totalPages) {
$this.find('[load-more-text]').text('Products Finished').removeClass('hide'); $this.find('[loader]').addClass('hide');
}
}
})
});Last video : https://youtu.be/RZcK6xG8Qf8
Click on the link below to get shopify account and 15 days trial if you haven't get yet Link - https://bit.ly/2ZUXj9C
#shopify #ShopifyCollections #ShopifyLoadMoreButton
Instagram : https://www.instagram.com/learnwithhannan/
Facebook : https://web.facebook.com/LearnWithHannan/
Keep Following And Learn More.
Wish You Success,
Hannan Waheed
