I wanted to help explain what @Kostop19 had to say about Dawn theme.
please put this code in theme.liquid
<script src="{{ 'loadmore.js' | asset_url }}" defer="defer"></script>
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 :
<load-more class="load-more_wrap"
data-next-url="{{ paginate.next.url }}"
data-current-page="{{ paginate.current_page }}"
data-total-pages="{{ paginate.pages }}"
data-page-size="{{ paginate.page_size }}"
data-total-items="{{paginate.items}}"
>
<script>console.log({{ paginate | json }})</script>
<div class="load-more_row">
Items shown
</div>
<div class="load-more_row">
<span load-items-count>{{ paginate.page_size }}</span> / {{paginate.items}}
</div>
<button class="load-more_row button button--secondary js-load-more" type="button">
Load more
</button>
</load-more>
Don't forget to follow me on :
