Skip to content

Instantly share code, notes, and snippets.

@Maybach91
Last active October 27, 2023 13:19
Show Gist options
  • Save Maybach91/2278dac9d58d9d1fbf4b230fa4bc0f91 to your computer and use it in GitHub Desktop.
Save Maybach91/2278dac9d58d9d1fbf4b230fa4bc0f91 to your computer and use it in GitHub Desktop.
[Shopify Load More Products Button Javascript] its the vanilla javascript version #shopify #loadmore #products #collection #tailwind
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]);
}
}
<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>

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}}">
  1. Add main-collection-product-grid.liquid content to the end of the grid on your collection page.
  2. Include the script on the collection page
    {% if template contains 'collection' %}
      <script src="{{ 'collection-load-more.js' | asset_url }}" defer="defer"></script>
    {%endif%}
  3. Check the class name of your product items / card (default is .grid__item if different change Line 26 in the javascript file.
@Maybach91
Copy link
Author

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.

@deeraj2410
Copy link

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.

@ellenventu
Copy link

ellenventu commented Nov 22, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment