Load more Ajax images

1

Hi all! I was applying load more recipe for an images’ collection but I do have some issue.

I have a list of 60 logos and the first row displayed is limited up to 15 logos, then by clicking “show more” I’d like to display all the hidden ones (45).

This is what I’ve done so far:

/site/snippets/project.php

<img src="<?= $img->url(); ?>">

/site/templates/about.php

<div class="logo-list" data-page="<?= $pagination->nextPage() ?>">
  <?php foreach ($imagesL as $img): ?>
    <?php snippet('project', ['img' => $img]) ?>
  <?php endforeach ?>
</div>  

/site/controllers/about.php

<?php

return function ($page, $site, $kirby) {
  $limit    = 15;
  $imagesL = $page->partner_list()->toFiles()->paginate($limit);

  return [
      'limit'      => $limit,
      'imagesL'   => $imagesL,  
      'pagination' => $imagesL->pagination(),  
    ];
};

Here I setted a high limit number to displayed all the remaining logos:

/site/controllers/about.json.php

<?php

return function ($page, $site, $kirby) {
  $limit    = 60;
  $imagesL   = $page->partner_list()->toFiles()->paginate($limit);
  $pagination = $imagesL->pagination();
  $more       = $pagination->hasNextPage();

  return [
      'imagesL' => $imagesL,
      'more'     => $more,
      'html'     => '',
      'json'     => [],
    ];
};

And finally JS:

document.documentElement.classList.replace("no-js", "js");

document.addEventListener("DOMContentLoaded", () => {
  const element = document.querySelector(".logo-list");
  const button = document.querySelector(".load-more");
  let page = parseInt(element.getAttribute("data-page"));

  const fetchProjects = async () => {
    let url = `${window.location.href.split("#")[0]}.json/page:${page}`;
    try {
      const response = await fetch(url);
      const { html, more } = await response.json();
      button.hidden = !more;
      element.insertAdjacentHTML("beforeend", html);
      page++;
    } catch (error) {
      console.log("Fetch error: ", error);
    }
  };

  if (button) {
    button.addEventListener("click", fetchProjects);
  }
});

At the moment if a fetched this page “…about/.json/page:2” It doesn’t exist, and “undefined” message appears once button is clicked…
Did I get it wrong?

Thank you!