How to pass a link from forloop to snippet

Kirby 3 Questions 🤔
1

Hey everyone,

I’m working on a projects page, when I click on a project I would like to open it on top of the projects page inside of a div.
But is not working: when I click on a project it just open the last one of the list.

How can I pass the right id/link to the snippet?

  1. I have a for loop where I load and display all the projects

  2. After the loop I have a snippet for showing the content of the project on top of the page

  3. I pass a variable to the snippet with the intention of pointing the project I clicked on (not working)

projects page

<main
  class="flex-grow mt-24 font-neue-reg w-full" x-data="{ project: false }">
  <section class="px-4 flex flex-row">
    @foreach ($page->children()->listed() as $item)
    <div class="w-64 pr-8">
      <a @click="project = ! project">
        <figure>
          <img src="{{ $item->images()->filterBy('template', 'cover') }}" alt="">
          <figcaption>
            <p>{{ $item->title() }}</p>
            <p>{{ $item->location() }}, {{ $item->year() }}</p>
          </figcaption>
        </figure>
      </a>
    </div>
    @endforeach
  </section>

  @snippet('project-container', $item)

</main>

snippet

 <article
    x-show="project"
    @click.outside="project = false"
    class="w-full border-t border-gray-300 bg-gray-100 overflow-scroll h-[calc(100%_-_6rem)] px-4 fixed z-20 bottom-0 flex flex-col items-center">
    <h3 class="pt-4 text-2xl">{{ $item->title() }}</h3>
    <section class="flex flex-col items-center space-y-4 max-w-xl mt-12">
      @foreach ($item->images()->filterBy('template', 'gallery') as $img)
      <figure>
        <img src="{{ $img->url() }}" alt="">
      </figure>
        @endforeach
      </section>
  </article>

I use alpine.js to show and hide the project & blade

Many thanks for any help!

2

Your are calling your snippet outside your foreach loop. At this point, $item has the value of the last item in the loop. So your snippet has to go inside the loop.

If I had to do this, I‘d use an Ajax call snd a content representation

1 Like
3

Thanks @texnixe I will try like you said