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]

Hi @Embey 

You want to load product on collection page with ajax so page cant load? 

[Guleria]

Hello Embey,

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

Thanks

[Embey]

@Jasoliya  yes i want on collection page so page cant load and you see all product on same page.

@Guleria  thank you for your instruction, where i need to put this code?

sorry but i am not developer and still learning shopify.

[Jasoliya]

You can find this code in Section->collection-template.liquid file. its your collection page file.

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

[Embey]

@Jasoliya  yes i have this section and see some of code available but not all, can you advice me please i have simple theme and want to set button that load more product.

[Jasoliya]

Ok, You have Snippet->product-grid.liquid file on theme?  or check in section->collection-template.liquid file inside bellow loop which file you have added.

{% for product in collection.products %}
{% endfor%}

[Embey]

No i have product-card-grid.liquid this file in snippet. 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');
      } 
    }
  })
});

[Embey]

Hi jasoliya

Thank you for your code and instructions its very helped me, but i am getting some issue like i have now 'icon-spinner' on my snippet what i need to add here ? 

[Jasoliya]

Change like that:

<span class="hide" loader>Loading...</span>

[Embey]

Thank you its work can you please check when i click on load button it load same product not next page product.thank you. url sent you

[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');
      } 
    }
  })
});

[Embey]

Yes its worked fine,thank you

Can you see load button left aligned can i make it center ?

[Jasoliya · Accepted solution]

Add this css:

.load-more_wrap { text-align: center; margin-top: 40px; }

[Embey]

Thank you so much Jasoliya, its work very well. really appropriate 

[AndyBerlin]

hi, that works very well.

but at the end of the last "load more" there is still a button, but nothings loads because all products of that collection are already shown.

thansk

andy

[Jasoliya]

Send your store url i will check if possible.

[AndyBerlin]

i will send shop url to your email

thanks Andy