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

Solved
Highlighted
Excursionist
19 0 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
Shopify Expert
2527 423 535

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Excursionist
19 0 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

Success.

Shopify Expert
2527 423 535

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Excursionist
19 0 0

Yes its worked fine,thank you

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

0 Likes

Success.

Shopify Expert
2527 423 535

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Excursionist
19 0 0

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

0 Likes