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

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

0 Likes
Jasoliya
Shopify Expert
4299 569 1072

Change like that:

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

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
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

0 Likes
Jasoliya
Shopify Expert
4299 569 1072

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.
If helpful then please Like and Accept Solution.
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

Yes its worked fine,thank you

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

0 Likes
Jasoliya
Shopify Expert
4299 569 1072

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.
If helpful then please Like and Accept Solution.
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 so much Jasoliya, its work very well. really appropriate 

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

0 Likes
Jasoliya
Shopify Expert
4299 569 1072

Send your store url i will check if possible.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
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
AndyBerlin
Tourist
7 0 2

i will send shop url to your email

thanks Andy

0 Likes