[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.