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

Solved
D-SOKO
Tourist
8 0 1

The code snippets are cut off. Can you please provide the full snippet? Thanks.

0 Likes
Jasoliya
Shopify Expert
4367 574 1101

this code work for debut theme not for any other,

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
AMarx_
New Member
2 0 0

Hi,

 

I implemented the code for collection-template.liquid but the 'Load More' button is not centered on the page, it is on the left. Can you please let me know how to fix this? 

 

Thanks in advance! 

 

Austin

0 Likes
Chicafull
Excursionist
10 0 5

 

Hi @Jasoliya, thanks for everything. The load more botton works perfectely but I have two issues: 1. I still have those arrows which allow you to change the page to see more products, and 2. My load more botton is on my left, and I saw that you sent a code to solve this problem but I don´t know where I have to put it exactely.  Can you help me? 

This is my website link:  https://fullofgrace.com.co/collections/aretes

I really will apreciate your help

Chicafull
Excursionist
10 0 5

@Jasoliya I worked on that and now I´ve solved all those issues, but I have a problem, at the end of the last "load more" there is still a button, but nothing loads because all products of that collection are already shown. What should I do? 

Thanks. 

0 Likes
Jasoliya
Shopify Expert
4367 574 1101

Hi

You have to follow proper way it work, if you miss anything it will not work and need code check whats affecting. cant say direct. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Chicafull
Excursionist
10 0 5

Hi @AndyBerlin, you can replace the second code for this one, it worked for me:

$('.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');
} else {
$this.attr('disabled', true); $this.find('[load-more-text]').addClass('hide'); $this.find('[loader]').addClass('hide');
}
}
})
});

0 Likes
Chicafull
Excursionist
10 0 5

Hi @AMarx_ , you can replace the first code for this one: 

 

<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" style="text-align: center; margin-top: 40px;">
          <script>console.log(collection.products.size);</script>
            <button class="btn js-load-more">
              <span load-more-text>cargar más</span>
              <span class="hide" loader>cargando...</span>
              </but>
0 Likes
AMarx_
New Member
2 0 0

@Chicafull Thanks! I figured this out, but now I am having a similar issue as to what you previously posted where the load more button doesn't go away once you get to the bottom of the page. In my case, it is also repeating the first page over and over and doesn't display any products that were previously on page 2. https://antheianyc.com/collections/plants 

 

Were you able to get your Load More button to go away?

0 Likes
HannanWaheed
New Member
2 0 0

I tired this code on debut theme seems like its getting the same first page products and loads them again and again so i update the code a little to make it work as it works for me

 <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>

 

$('.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');
      } 
    }
  })
});
0 Likes