How can i set continue load product on collection page without go to next page

Store Design
41

I wanted to help explain what @Kostop19 had to say about Dawn theme.

please put this code in theme.liquid

and create a new js file in assets/loadmore.js
put the following code :
( don’t forget to change the PRODUCT ID CONTAINER as needed )

class LoadMore extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("click", this.loadMoreItems);
  }

  loadMoreItems() {
    const loadMoreBtn = this.querySelector('[type="button"]');
    loadMoreBtn.setAttribute("disabled", true);

    let { currentPage, pageSize, nextUrl, totalItems } = this.dataset;
    let nextPage = parseInt(this.dataset.currentPage) + 1;

    fetch(nextUrl.replace(/page=[0-9]+/, "page=" + nextPage))
      .then((response) => response.text())
      .then((responseText) => {
        const html = responseText;
        $("#PRODUCT ID CONTAINER").append($(html).find("#PRODUCT ID CONTAINER").html());
      })
      // handle error
      .catch((e) => {
        console.error(e);
      })
      .finally(() => {
        loadMoreBtn.removeAttribute("disabled");
        this.dataset.currentPage = parseInt(this.dataset.currentPage) + 1;

        let isLastPage =
          parseInt(totalItems) - nextPage * parseInt(pageSize) < 0;
        this.querySelector("[load-items-count]").innerHTML = isLastPage
          ? parseInt(totalItems)
          : nextPage * parseInt(pageSize);
        isLastPage && loadMoreBtn.setAttribute("disabled", true);
      });
  }
}

customElements.define("load-more", LoadMore);

then in the file sections/main-collection-product-grid.liquid
Enter the following code, after foor in :

Don’t forget to follow me on :