How can i set continue load product on collection page without go to next page.

[Embey]

Hi community, can you help me with this.

I want to load product without going to next page.

Thank you

[Jasoliya · Accepted solution]

ok, 

Follow this:

1. open section->collection-template.liquid file and find ' paginate.pages > 1' condition.

then add bellow code in side this condition.

<input type="hidden" value="{{ paginate.next.url }}" data-next-url>
     	<input type="hidden" value="{{ paginate.pages }}" data-total-pages>
        <input type="hidden" value="{{ paginate.current_page  }}" data-current-page>
        <div class="load-more_wrap">
          <button class="btn js-load-more">
            <span load-more-text>Load more</span>
            <span class="hide" loader>{% include 'icon-spinner' %}</span>
          </but

2. Now add this js in Asset->theme.js 

$('.js-load-more').on('click', function(){
  var $this =$(this),totalPages = parseInt($('[data-total-pages]').val()),currentPage = parseInt($('[data-current-page]').val());
  $this.attr('disabled', true);
  $this.find('[load-more-text]').addClass('hide');
  $this.find('[loader]').removeClass('hide');
  var nextUrl = $('[data-next-url]').val().replace(/page=[0-9]+/,'page='+currentPage);
  $('[data-current-page]').val(currentPage);
  $.ajax({
    url: nextUrl,
    type: 'GET',
    dataType: 'html',
    success: function(responseHTML){
      $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
    },
    complete: function() {
      if(currentPage <= totalPages) {
         $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
    }
  })
});

[Jasoliya · Accepted solution]

Replace with this Js code:

$('.js-load-more').on('click', function(){
  var $this =$(this),totalPages = parseInt($('[data-total-pages]').val()),currentPage = parseInt($('[data-current-page]').val());
  $this.attr('disabled', true);
  $this.find('[loader]').removeClass('hide');
  currentPage = currentPage+1;
  var nextUrl = $('[data-next-url]').val().replace(/page=[0-9]+/,'page='+currentPage);
  $('[data-current-page]').val(currentPage);
  $.ajax({
    url: nextUrl,
    type: 'GET',
    dataType: 'html',
    success: function(responseHTML){
      $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
    },
    complete: function() {
      if(currentPage <= totalPages) {
         $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
    }
  })
});

[designrepo]

It's not working for the dawn theme. Please share me perfect code.

Thanks!

[PrezencaGroup]

This is working for Dawn theme. But keep in mind to change #main-collection-product-grid to your product list id if needed

[Natzukofront]

Hi @Jasoliya,

I am using Debut theme and i followed every step of what you said.
I have customized my Collection page before and i have 2 popular collection showing before the main collection.
When clicking on "load more" i want to show every prduct of the main collection but not on the 2 popular collection. 
The code is working except that when i clicked on "load more" it duplicate my first popular collection on the three collection at the same time.
Any help would be much appreciated here ! 
here is my page : https://geek-art.fr/collections/tableaux-naruto

[Guleria]

Instructions depends on which theme you are using. 
And if you are not aware about liquid, i suggest hire some one to do this.

[Guleria]

Hello Embey,

Check out this its exact same you are looking for, just you have to implement it in your theme code.

Thanks