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

Solved
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

 

0 Likes
Jasoliya
Shopify Expert
4367 574 1101

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

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
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
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
0 Likes
GetOrchard
Excursionist
33 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');
      } 
    }
  })
});
0 Likes
Kostop19
New Member
1 0 0

 

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);

 

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

0 Likes