[Shopify Load More Products Button Javascript] its the vanilla javascript version #shopify #loadmore #products #collection #tailwind

collection-load-more.js

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

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 new_url = productgrid.dataset.nextUrl;
  if (new_url) {
    load_more_btn.style.display = 'block';
  }
  next_url = new_url;
  for (let i = 0; i < new_products.length; i++) {
    products_on_page.appendChild(new_products[i]);
  }
}

main-collection-product-grid.liquid

<div class="load-more">
  <a class="load-more_btn text-center mt-12 button button--primary" onclick="loadMoreProducts()">Load More</a>
  <div class="load-more_spinner hidden w-8 h-8 ml-auto mr-auto border-4 border-solid border-black border-t-gray-200 rounded-full animate-spin"></div>
</div>

shopify-load-more-products-button-vanilla-javascript.md

Instructions

This script is based on (this)[https://github.com/programmerhabib/load-more-button-on-shopify-collection-page/blob/main/load%20more%20product%20button.txt]

I’m using the Dawn Theme with Tailwind. To get this visually work you will need to install tailwind. Otherwise you have to write your own CSS for the Button + Spinner.

1. Add Next page as data attribute to product grid on your collection page: data-next-url="{{paginate.next.url}}" Looks like this in Dawn:

<ul id="product-grid" data-id="{{ section.id }}" class="flex-grid product-grid ..." data-next-url="{{paginate.next.url}}">

2. Add main-collection-product-grid.liquid content to the end of the grid on your collection page.
3. Include the script on the collection page

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

4. Check the class name of your product items / card (default is .grid__item if different change Line 26 in the javascript file.

Hi,
I have used your documentation and it seems to work.

The only thing I notice is that when I click on the "load more" button not all the products of collection are shown, the last 3 are missing.

In fact, doing some console.log () it seems that not all products are present in the variable "productgrid".

If I use the standard pagination of the theme "Dawn" instead I see all the products of collection (file pagination.liquid).

Are you also experiencing this error?

Thanks

Hej @ellenventu,

thanks for the feedback. I will take a look into it, but as far as i know i didn’t came up with this kind of error. You can debug this maybe further, if you look at the XHR requests (should be something with collections/COLLECTIONAME?page=2 in the url) and open this url and look what kind of products are their. Since this script only opens the {{paginate.next_url}} and get all the items from the #product_grid.

When i find the time, i will look into this.

hi @Maybach91

I also get products counted as less in number. but when I check in response, I get 8 items, but when it's added to existing ul, it adds only 4 product items.

Hi,
if it helps, I solved the problem like this:

 for (let i = 0; i < new_products.length; i++) {
    let single_product = new_products[i].cloneNode(true);
    products_on_page.appendChild(single_product);
}

It works for me.