Infinite Scroll is an obvious feature to expect on modern E-Commerce websites. Sadly, Shopify doesn’t provide a first class solution for it.
Here is my take on how to implement it in a way that improves the user experience without blocking access to web crawlers and people who doesn’t have javascript enabled.
Start by creating section file called main-collection.liquid. This is section includes a grid of product, a loading spinner and pagination buttons that will be used by web crawlers. Once we load the script, javascript will take over and those buttons won't be necessary.
{% assign page_size = section.settings.page_size %} {% paginate collection.products by page_size %} <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4"> {% for product in collection.products %} {% render 'product-card', product: product %} {% endfor %} </div> <div class="main-collection-pagination flex m-5 uppercase text-xs"> {% if paginate.previous.is_link %} <div class="flex-1 text-left"> <a class="main-collection-prev-button" href="{{ paginate.previous.url }}"> {{ paginate.previous.title }} </a> </div> {% endif %} {% if paginate.next.is_link %} <div class="flex-1 text-right"> <a class="main-collection-next-button" href="{{ paginate.next.url }}"> {{ paginate.next.title }} </a> </div> {% endif %} </div> <div class="main-collection-loading opacity-0 flex justify-center mx-5 my-10 uppercase text-xs"> <span>Loading...</span> </div> {% endpaginate %} {% schema %} { "name": "Main Collection", "class": "main-collection", "settings": [ { "type": "range", "id": "page_size", "label": "Page size", "min": 4, "max": 16, "step": 1, "default": 8, "info" : "Number of products displayed per page" } ], "presets": [ { "name": "Main Collection" } ] } {% endschema %} Now let's create an entrypoint for the script that will run when the entire document has been loaded by the browser.
import { initMainCollection } from "./main-collection"; async function main() { const { templateName } = document.body.dataset; if (templateName === "collection") { const sectionElement = document.querySelector( ".shopify-section.main-collection" ); if (sectionElement instanceof HTMLElement) { initMainCollection(sectionElement); } } } document.addEventListener("DOMContentLoaded", main); In the main script we will check if the page contains the main-collection section, and if that's the case we will initialize it using a separate function called initMainCollection.
The code for this function is pretty long, but this is the idea behind it.
- Hide pagination buttons
- Get url of next page results from the next button
- Wait for when user has scrolled to the bottom
- If there is another page, fetch the main section html and insert it after the current one.
- Repeat 1-4 on the new section
/** @param {HTMLElement} section */ export function initMainCollection(section) { if (window.IntersectionObserver) { setupInfiniteScroll(section); } } /** @param {HTMLElement} section */ function setupInfiniteScroll(section) { const nextButton = section.querySelector(".main-collection-next-button"); const pagination = section.querySelector(".main-collection-pagination"); const loading = section.querySelector(".main-collection-loading"); // When infinite scroll is active, pagination // buttons should stay hidden if (pagination instanceof HTMLElement) { hideElement(pagination); } if (loading instanceof HTMLElement) { loading.style.opacity = "1.0"; } else { // Loading element is integral to the infinite scroll // because it will be used as intersection target return; } // Grab url of next page from the button href let nextPageUrl; if (nextButton instanceof HTMLAnchorElement) { nextPageUrl = nextButton.href; } // If there is no next page link, there is no work to be done. if (!nextPageUrl) { hideElement(loading); return; } const observer = new IntersectionObserver(function(entries, observer) { const entry = entries[0]; if (entry.isIntersecting) { // Unsubscribe right away observer.unobserve(entry.target); // do something renderNextSection(); } }); observer.observe(loading); async function renderNextSection() { // Fetch main-collection section from next page let nextPageSectionHtml; try { const response = await fetch(nextPageUrl + "§ions=main-collection"); const data = await response.json(); nextPageSectionHtml = data["main-collection"]; } catch (err) { console.error(err); } // If server returns nothing, leave. if (!nextPageSectionHtml) return; if (loading instanceof HTMLElement) { hideElement(loading); } // Insert section HTML after the current section section.insertAdjacentHTML("afterend", nextPageSectionHtml); const nextPageSection = section.nextElementSibling; if (nextPageSection instanceof HTMLElement) { // Setup infinite scroll on the next section setupInfiniteScroll(nextPageSection); } } } /** @param {HTMLElement} element */ function hideElement(element) { element.style.display = "none"; } 
Top comments (0)