Load More button not working properly.

[leechoostore]

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

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @leechoostore 

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.

[BSS-TekLabs · Accepted solution]

<div id="paginateNext" data-next-url="{{paginate.next.url}}" data-total-page="{{paginate.pages}}" style="display: none">{{paginate.next.url}}</div>

- Add this code to main-collection-product-grid.liquid

[BSS-TekLabs · Accepted solution]

{% if template contains 'collection' %}
  <script src="{{ 'collection-load-more.js' | asset_url }}" defer="defer"></script>
{%endif%}

- Add this to theme.liquid

[BSS-TekLabs · Accepted solution]

.load-more {
position: relative !important;
    justify-content: center !important;
    display: flex !important;
}

Add this to base.css

[BSS-TekLabs · Accepted solution]

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

[BSSCommerce-TC]

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.

[leechoostore]

leechoo.com

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @leechoostore 

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.

[BSS-TekLabs · Accepted solution]

<div id="paginateNext" data-next-url="{{paginate.next.url}}" data-total-page="{{paginate.pages}}" style="display: none">{{paginate.next.url}}</div>

- Add this code to main-collection-product-grid.liquid

[BSS-TekLabs · Accepted solution]

{% if template contains 'collection' %}
  <script src="{{ 'collection-load-more.js' | asset_url }}" defer="defer"></script>
{%endif%}

- Add this to theme.liquid

[BSS-TekLabs · Accepted solution]

.load-more {
position: relative !important;
    justify-content: center !important;
    display: flex !important;
}

Add this to base.css

[BSS-TekLabs · Accepted solution]

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

[leechoostore]

I want 16 products per page

[BSS-TekLabs · Accepted solution]

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

[leechoostore]

Thanks! It worked perfectly!