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

Solved
Embey
Excursionist
34 1 0

Hi community, can you help me with this.

I want to load product without going to next page.

Thank you

Replies 35 (35)
Embey
Excursionist
34 1 0

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
Shopify Expert
4382 574 1103

Change like that:

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

 

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
Embey
Excursionist
34 1 0

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
Shopify Expert
4382 574 1103

This is an 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'); } } }) });
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

View solution in original post

Embey
Excursionist
34 1 0

Yes its worked fine,thank you

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

Jasoliya
Shopify Expert
4382 574 1103

This is an accepted solution.

Add this css:

.load-more_wrap { text-align: center; margin-top: 40px; }
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

View solution in original post

Embey
Excursionist
34 1 0

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

AndyBerlin
Tourist
7 0 2

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
Shopify Expert
4382 574 1103

Send your store url i will check if possible.

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
AndyBerlin
Tourist
7 0 2

i will send shop url to your email

thanks Andy