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

Accepted Solutions (3)

Accepted Solutions
Jasoliya
Shopify Expert
4615 596 1159

This is an 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');
      } 
    }
  })
});
Want to modify or custom changes on store hire me.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4615 596 1159

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.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4615 596 1159

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.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 39 (39)
Jasoliya
Shopify Expert
4615 596 1159

Hi @Embey 

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

Want to modify or custom changes on store hire me.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
Guleria
Shopify Partner
2233 459 676

Hello Embey,

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

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1

Embey
Excursionist
34 1 0

@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
Shopify Expert
4615 596 1159

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

 

Want to modify or custom changes on store hire me.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
Guleria
Shopify Partner
2233 459 676

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


Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1

Embey
Excursionist
34 1 0

@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
Shopify Expert
4615 596 1159

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%}
Want to modify or custom changes on store hire me.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
Embey
Excursionist
34 1 0

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

Jasoliya
Shopify Expert
4615 596 1159

This is an 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');
      } 
    }
  })
});
Want to modify or custom changes on store hire me.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
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
4615 596 1159

Change like that:

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

 

Want to modify or custom changes on store hire me.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
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
4615 596 1159

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.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
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 ?

Jasoliya
Shopify Expert
4615 596 1159

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.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
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 

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
4615 596 1159

Send your store url i will check if possible.

Want to modify or custom changes on store hire me.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp, Try our Free app for bundle page.
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