Overlay with content from subpage 🤯

Kirby 3 Solved ✅
1

So I have this question in my mind for some days now and I could not figure it out.
I’m creating a website for a festival and they got a lot of artists, which are shown under a program page. Each artists has their own text, social media links and so on. The program page only shows their image and their name and when the user taps on the image, I would like to show an overlay with all their information.

But I don’t want to wrap all those overlays in a loop, because this might take a while to load, my idea was to only create one overlay which get’s the content, when the user taps on the artist’s image. And as a little bonus I would like to change the pages url to …/program/michael-jackson (e.g.).
What’s the best practice? Create a JSON and load the data somehow?
Would love to hear your take on this!

2

That’s a typical use case for an Ajax request which would load the information from the server on a click event.

3

Seems like the only good idea. I need to work my way through this! Thank @texnixe for your input!

4

The “Load more with Ajax” recipe might be of help for a general way to do this: Load more with Ajax | Kirby CMS

5

Seems to work so far! Thanks.
But one big question mark in my head is: How to hook the json to each artist? So I got this huge JSON file which contains every artist and now I’m stuck. I don’t know how I create a loop which selects the right content for the right artist.

const fetchArtists = async () => {
  let url = `${window.location.href}.json`;

  try {
    const response = await fetch(url);
    const json  = await response.json();
    
    artistOverlay.querySelector('h2').innerHTML = json[1].artistName;
    artistOverlay.querySelector('.overlay--text p').innerHTML = json[1].text;
    artistOverlay.querySelector('img').src = json[1].image;

  } catch (error) {
    console.log('Fetch error: ', error);
  }
}

it works fine, when using just the second (e.g.) object :smiley:

6

Oh, and this is my function for each artist:

artistCards.forEach(card => {
  card.addEventListener('click', event => {
    fetchArtists();
    console.log(overlayClose);
    artistOverlay.classList.remove('hidden');
  })
})
7

I would only ever fetch one artist, not all of them.

8

Oh, and change let url = "${window.location.href}.json/artist:${artist};" to this? Could work!

9

No, you don’t need to filter the artists by parameter. Create the json representation for the child page (i.e. the single artist), not the parent.

1 Like
10

Wow, I love this forum! Thanks for your help. It works perfect now. Just need to fix couple of little things but I’m happy now. Thank you!

1 Like
11

You are welcome, great that it works!