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

Store Design
1

Hi community, can you help me with this.

I want to load product without going to next page.

Thank you

2

Hi @Embey

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

3

Hello Embey,

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

Thanks

4

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

5

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

1 Like
6

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

7

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

8

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%}
1 Like
9

No i have product-card-grid.liquid this file in snippet. thank you

10

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
  1. 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');
      } 
    }
  })
});
11

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 ?

12

Change like that:

<span class="hide" loader>Loading...</span>
1 Like
13

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

14

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');
      } 
    }
  })
});
1 Like
15

Yes its worked fine,thank you

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

16

Add this css:

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

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

18

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

19

Send your store url i will check if possible.

20

i will send shop url to your email

thanks Andy