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

Solved
Excursionist
19 0 0

Hi community, can you help me with this.

I want to load product without going to next page.

Thank you

0 Likes
Shopify Expert
2527 423 535

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.
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
0 Likes
Shopify Partner
440 84 96

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.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Excursionist
19 0 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.

0 Likes
Shopify Expert
2527 423 535

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.
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
Shopify Partner
440 84 96

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.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Excursionist
19 0 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.

0 Likes
Highlighted
Shopify Expert
2527 423 535

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

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

0 Likes

Success.

Shopify Expert
2527 423 535

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