Load More button not working properly

Store Design
1

I have added a Load More botton but its not showing all the products.

I have created collection-load-more.js

const products_on_page = document.getElementById(‘product-grid’);
const nextUrl = document.getElementById(‘paginateNext’);
let next_url = nextUrl.dataset.nextUrl;
let page = 3;

const load_more_btn = document.getElementsByClassName(‘load-more_btn’)[0];
const load_more_spinner = document.getElementsByClassName(‘load-more_spinner’)[0];
async function getNextPage() {
try {
console.log(“next_url”,next_url)
let res = await fetch(next_url);
return await res.text();
} catch (error) {
console.log(error);
}
}

async function loadMoreProducts() {
load_more_btn.style.display = ‘none’;
load_more_spinner.style.display = ‘block’;
let nextPage = await getNextPage();
const parser = new DOMParser();
const nextPageDoc = parser.parseFromString(nextPage, ‘text/html’);

load_more_spinner.style.display = ‘none’;

const productgrid = nextPageDoc.getElementById(‘product-grid’);
const new_products = productgrid.getElementsByClassName(‘grid__item’);
const newUrl = document.getElementById(‘paginateNext’);
const total_page = newUrl.dataset.totalPage;
const new_url = next_url.split(“page=”)[0]+“page=”+page;
if (page <= total_page) {
load_more_btn.style.display = ‘flex’;
}
next_url = new_url;
page ++;
for (let i = 0; i < new_products.length; i++) {
products_on_page.appendChild(new_products[i]);
}
}

Please help

2

Hi @leechoostore ,

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3
4 
const products_on_page = document.getElementById('product-grid');
const nextUrl = document.getElementById('paginateNext');
let next_url = nextUrl.dataset.nextUrl;
let page = 3;

const load_more_btn = document.getElementsByClassName('load-more_btn')[0];
const load_more_spinner = document.getElementsByClassName('load-more_spinner')[0];
async function getNextPage() {
  try {
    let res = await fetch(next_url);
    return await res.text();
  } catch (error) {
    console.log(error);
  }
}

async function loadMoreProducts() {
  load_more_btn.style.display = 'none';
  load_more_spinner.style.display = 'block';
  let nextPage = await getNextPage();
  const parser = new DOMParser();
  const nextPageDoc = parser.parseFromString(nextPage, 'text/html');

  load_more_spinner.style.display = 'none';

  const productgrid = nextPageDoc.getElementById('product-grid');
  const new_products = productgrid.getElementsByClassName('grid__item');
  const newUrl = document.getElementById('paginateNext');
  const total_page = newUrl.dataset.totalPage;
  const new_url = next_url.split("page=")[0]+"page="+page;
  if (page <= total_page) {
    load_more_btn.style.display = 'flex';
  }
  const length = new_products.length
  for (let i = 0; i < length; i++) {
    products_on_page.appendChild(new_products[0]);
  }
  next_url = new_url;
  page++;
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5 

{{paginate.next.url}}
  • Add this code to main-collection-product-grid.liquid
6 
{% if template contains 'collection' %}
  
{%endif%}
  • Add this to theme.liquid
7 
.load-more {
position: relative !important;
    justify-content: center !important;
    display: flex !important;
}

Add this to base.css

8

I want 16 products per page

9

Please try my methods to see if they work. If not, please let me know.

10

Yes. My code worked for all 16 products. You can try

11

Thanks! It worked perfectly!

12

Load More button is not working fine with SORTING and FILTER