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

Solved

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

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)
Jasoliya
Shopify Partner
4823 625 1225

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Partner
4823 625 1225

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Partner
4823 625 1225

This is an accepted solution.

Add this css:

.load-more_wrap { text-align: center; margin-top: 40px; }
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 40 (40)

Jasoliya
Shopify Partner
4823 625 1225

Hi @Embey 

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
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 Partner
4823 625 1225

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

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
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 Partner
4823 625 1225

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
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 Partner
4823 625 1225

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
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 Partner
4823 625 1225

Change like that:

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

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
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 Partner
4823 625 1225

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
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 Partner
4823 625 1225

This is an accepted solution.

Add this css:

.load-more_wrap { text-align: center; margin-top: 40px; }
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
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 Partner
4823 625 1225

Send your store url i will check if possible.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
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

Jasoliya
Shopify Partner
4823 625 1225

this code work for debut theme not for any other,

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Chicafull
Excursionist
11 0 5

 

Hi @Jasoliya, thanks for everything. The load more botton works perfectely but I have two issues: 1. I still have those arrows which allow you to change the page to see more products, and 2. My load more botton is on my left, and I saw that you sent a code to solve this problem but I don´t know where I have to put it exactely.  Can you help me? 

This is my website link:  https://fullofgrace.com.co/collections/aretes

I really will apreciate your help

Chicafull
Excursionist
11 0 5

@Jasoliya I worked on that and now I´ve solved all those issues, but I have a problem, at the end of the last "load more" there is still a button, but nothing loads because all products of that collection are already shown. What should I do? 

Thanks. 

Jasoliya
Shopify Partner
4823 625 1225

Hi

You have to follow proper way it work, if you miss anything it will not work and need code check whats affecting. cant say direct. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Chicafull
Excursionist
11 0 5

Hi @AndyBerlin, you can replace the second code for this one, it worked for me:

$('.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');
} else {
$this.attr('disabled', true); $this.find('[load-more-text]').addClass('hide'); $this.find('[loader]').addClass('hide');
}
}
})
});

designrepo
Excursionist
48 0 4

Thanks Jasoliya!!

This code work perfectly.

But one more thing. When I paste this code on multiple section and click for one section but load more all section. 

Please see the attached.

Screenshot_30.png

 

Please help me for multiple section on same page.

 

 

D-SOKO
Tourist
8 0 1

The code snippets are cut off. Can you please provide the full snippet? Thanks.

AMarx_
Visitor
2 0 0

Hi,

 

I implemented the code for collection-template.liquid but the 'Load More' button is not centered on the page, it is on the left. Can you please let me know how to fix this? 

 

Thanks in advance! 

 

Austin

Chicafull
Excursionist
11 0 5

Hi @AMarx_ , you can replace the first code for this one: 

 

<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" style="text-align: center; margin-top: 40px;">
          <script>console.log(collection.products.size);</script>
            <button class="btn js-load-more">
              <span load-more-text>cargar más</span>
              <span class="hide" loader>cargando...</span>
              </but>
AMarx_
Visitor
2 0 0

@Chicafull Thanks! I figured this out, but now I am having a similar issue as to what you previously posted where the load more button doesn't go away once you get to the bottom of the page. In my case, it is also repeating the first page over and over and doesn't display any products that were previously on page 2. https://antheianyc.com/collections/plants 

 

Were you able to get your Load More button to go away?

HannanWaheed
Shopify Partner
2 0 0

I tired this code on debut theme seems like its getting the same first page products and loads them again and again so i update the code a little to make it work as it works for me

 <input type="hidden" value="{{ paginate.next.url }}" data-next-link>
    <input type="hidden" value="{{ paginate.pages }}" data-all-pages>
    <input type="hidden" value="{{ paginate.current_page  }}" data-this-page>
    <input type="hidden" value="{{ collection.url  }}" data-coll-url>
    <div class="load-more_wrap">
      <button class="btn js-load-more">
        <span load-more-text>Load more</span>
        <span class="hide" loader>
            <img src="{{ 'loader.gif' | asset_url }}"/>
        </span>
      </button>
    </div>

 

$('.js-load-more').on('click', function(){
  var $this =$(this),
      totalPages = parseInt($('[data-all-pages]').val()),
      currentPage = parseInt($('[data-this-page]').val()),
      datacollurl = $('[data-coll-url]').val();;
  $this.attr('disabled', true);
  $this.find('[load-more-text]').addClass('hide');
  $this.find('[loader]').removeClass('hide');
  var nextUrl = $('[data-next-link]').val();
  var current_page_new = currentPage + 1;
  var next_coll = currentPage + 2;
  //alert(current_page_new)
    //return false;
  $.ajax({
    url: nextUrl,
    type: 'GET',
    dataType: 'html',
    success: function(responseHTML){
      $('[data-next-link]').val(datacollurl + "?page="+next_coll);
      $('[data-this-page]').val(current_page_new);
      $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
    },
    complete: function() {
      if(current_page_new < totalPages) {
         $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
      if(current_page_new >= totalPages) {
         $this.find('[load-more-text]').text('Products Finished').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
    }
  })
});
Shaheer03161
Tourist
8 0 2

Hi, sir i tried your code and it worked 

can you tell me the possible solution for after clicking it shows all products sudden as i attached the reference link below

https://www.ninelineapparel.com/collections/mens-apparel

if you can help me

 

Jasoliya
Shopify Partner
4823 625 1225

This instruction is for debut theme so you can take idea. or need custom code for other theme.

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Shaheer03161
Tourist
8 0 2
I need this https://www.ninelineapparel.com/collections/mens-apparel
websites structure in my debut theme which is like this
https://freedombuilt.com/collections/mens
GetOrchard
Excursionist
34 2 5

I am using Debut and this does not work for me. When I click Load More nothing happens and I get an error: "Uncaught ReferenceError: $ is not defined"
for theme.js

$('.js-load-more').on('click', function(){
  var $this =$(this),
      totalPages = parseInt($('[data-all-pages]').val()),
      currentPage = parseInt($('[data-this-page]').val()),
      datacollurl = $('[data-coll-url]').val();;
  $this.attr('disabled', true);
  $this.find('[load-more-text]').addClass('hide');
  $this.find('[loader]').removeClass('hide');
  var nextUrl = $('[data-next-link]').val();
  var current_page_new = currentPage + 1;
  var next_coll = currentPage + 2;
  //alert(current_page_new)
    //return false;
  $.ajax({
    url: nextUrl,
    type: 'GET',
    dataType: 'html',
    success: function(responseHTML){
      $('[data-next-link]').val(datacollurl + "?page="+next_coll);
      $('[data-this-page]').val(current_page_new);
      $('.grid--view-items').append($(responseHTML).find('.grid--view-items').html());
    },
    complete: function() {
      if(current_page_new < totalPages) {
         $this.attr('disabled', false); $this.find('[load-more-text]').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
      if(current_page_new >= totalPages) {
         $this.find('[load-more-text]').text('Products Finished').removeClass('hide'); $this.find('[loader]').addClass('hide');
      } 
    }
  })
});
Kostop19
Visitor
1 0 2

 

A solution for Dawn theme

<load-more class="load-more_wrap" 
      data-next-url="{{ paginate.next.url }}" 
      data-current-page="{{ paginate.current_page  }}" 
      data-total-pages="{{ paginate.pages }}" 
      data-page-size="{{ paginate.page_size }}"
      data-total-items="{{paginate.items}}"
      > 
      <script>console.log({{ paginate | json }})</script>
      <div class="load-more_row">
        Items shown
      </div>
      <div class="load-more_row">
        <span load-items-count>{{ paginate.page_size }}</span> / {{paginate.items}}
      </div>
      <button class="load-more_row button button--secondary js-load-more" type="button">
        Load more
      </button>
    </load-more>
class LoadMore extends HTMLElement { 
  constructor(){
    super();
    this.addEventListener("click", this.loadMoreItems);
  }

  loadMoreItems() { 
   
    const loadMoreBtn = this.querySelector('[type="button"]');
    loadMoreBtn.setAttribute("disabled", true);

    let { currentPage, pageSize, nextUrl, totalItems } = this.dataset
    let nextPage = parseInt(this.dataset.currentPage) + 1
    
    fetch(nextUrl.replace(/page=[0-9]+/,'page='+ nextPage))
      .then(response => response.text())
      .then((responseText) => {
        const html = responseText;
        $('#main-collection-product-grid').append($(html).find('#main-collection-product-grid').html());
      }).catch((e) => {
        // handle error
        console.error(e);
      })
      .finally(() => {
        loadMoreBtn.removeAttribute("disabled");
        this.dataset.currentPage = parseInt(this.dataset.currentPage) + 1;
        
        let isLastPage = parseInt(totalItems) - (nextPage * parseInt(pageSize) ) < 0
        this.querySelector('[load-items-count]').innerHTML = isLastPage ? parseInt(totalItems) : nextPage * parseInt(pageSize)
        isLastPage && loadMoreBtn.setAttribute("disabled", true);
      });
  }
}

customElements.define('load-more', LoadMore);

 

YashG
New Member
6 0 0

Hey @Kostop19 ,

It's not working for the dawn theme. Can you please recheck the code again and also suggest that where the code should be implemented means in which file and at which point. I had implemented the code after the condition {%- if paginate.pages > 1 -%} in the main-collection-product-grid.liquid but the doenst't worked for me.

passyah-raffi
Shopify Partner
1 0 0

I wanted to help explain what @Kostop19 had to say about Dawn theme.

please put this code in theme.liquid

 

 

<script src="{{ 'loadmore.js' | asset_url }}" defer="defer"></script>

 

 


and create a new js file in assets/loadmore.js 

put the following code :
( don't forget to change the PRODUCT ID CONTAINER as needed )

 

 

class LoadMore extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("click", this.loadMoreItems);
  }

  loadMoreItems() {
    const loadMoreBtn = this.querySelector('[type="button"]');
    loadMoreBtn.setAttribute("disabled", true);

    let { currentPage, pageSize, nextUrl, totalItems } = this.dataset;
    let nextPage = parseInt(this.dataset.currentPage) + 1;

    fetch(nextUrl.replace(/page=[0-9]+/, "page=" + nextPage))
      .then((response) => response.text())
      .then((responseText) => {
        const html = responseText;
        $("#PRODUCT ID CONTAINER").append($(html).find("#PRODUCT ID CONTAINER").html());
      })
      // handle error
      .catch((e) => {
        console.error(e);
      })
      .finally(() => {
        loadMoreBtn.removeAttribute("disabled");
        this.dataset.currentPage = parseInt(this.dataset.currentPage) + 1;

        let isLastPage =
          parseInt(totalItems) - nextPage * parseInt(pageSize) < 0;
        this.querySelector("[load-items-count]").innerHTML = isLastPage
          ? parseInt(totalItems)
          : nextPage * parseInt(pageSize);
        isLastPage && loadMoreBtn.setAttribute("disabled", true);
      });
  }
}

customElements.define("load-more", LoadMore);

 

 

 

then in the file sections/main-collection-product-grid.liquid
Enter the following code, after foor in :

 

 

    <load-more class="load-more_wrap" 
      data-next-url="{{ paginate.next.url }}" 
      data-current-page="{{ paginate.current_page  }}" 
      data-total-pages="{{ paginate.pages }}" 
      data-page-size="{{ paginate.page_size }}"
      data-total-items="{{paginate.items}}"
     > 
      <script>console.log({{ paginate | json }})</script>
      <div class="load-more_row">
        Items shown
      </div>
      <div class="load-more_row">
        <span load-items-count>{{ paginate.page_size }}</span> / {{paginate.items}}
      </div>
      <button class="load-more_row button button--secondary js-load-more" type="button">
        Load more
      </button>
    </load-more>

 

 

Don't forget to follow me on :

designrepo
Excursionist
48 0 4

It's not working for the dawn theme. Please share me perfect code.

Thanks!

PrezencaGroup
Shopify Partner
2 0 0

This is working for Dawn theme. But keep in mind to change #main-collection-product-grid to your product list id if needed

 

Natzukofront
Visitor
2 0 0

Hi @Jasoliya,

I am using Debut theme and i followed every step of what you said.
I have customized my Collection page before and i have 2 popular collection showing before the main collection.
When clicking on "load more" i want to show every prduct of the main collection but not on the 2 popular collection. 
The code is working except that when i clicked on "load more" it duplicate my first popular collection on the three collection at the same time.
Any help would be much appreciated here ! 
here is my page : https://geek-art.fr/collections/tableaux-naruto

Guleria
Shopify Partner
3522 710 991

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


- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL

Guleria
Shopify Partner
3522 710 991

Hello Embey,

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

Thanks

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL