How to fetch fields?

Kirby 3 Solved ✅
#1

Hello.

I have the below code which outputs the children of my page and are styled as thumbnail/card.

<?php $dishes = $page->children()->listed() ?>
  <ul class="dishes">
    <?php foreach ($dishes as $dish): ?>
      
    <li>
      <?php if($image = $dish->image()): ?>
      <img src="<?= $image->url() ?>" alt="<?= $image->alt()->html() ?>">
      <?php endif ?>
    </li>
    <?php endforeach ?>
  </ul>

How can I access the fields(title, text) of the children when clicking the thumbnail/card?

Basically, I want to show the details of whatever thumbnail/card is clicked on a <div> in my design.

#2

For the clicking part, you would most likely have to use a javascript solution (like this example from TippyJS, or search on Github for ‘tooltip’ or ‘popover’).

Then, in your HTML where you define what should be displayed, you’d go like this:

<?php $dishes = $page->children()->listed() ?>
  <ul class="dishes">
    <?php foreach ($dishes as $dish): ?>
      
    <li>
      <?php if($image = $dish->image()): ?>
      <img src="<?= $image->url() ?>" alt="<?= $image->alt()->html() ?>">
      <?php endif ?>
      <div id="example" style="display: none;">
        <?= $dish->title()->html() ?>
        <?= $dish->text()->kt() ?>
      </div>
    </li>
    <?php endforeach ?>
  </ul>

… and some Javascript,

#3

Ok so I’ve been thinking it as well and I think the easiest or probably the only way for my design need is to have all details available, stacked and hidden and use JavaScript to show details of the clicked item.

At first I was having the impression that I can just pass the $slug of the clicked item to a function which uses the slug to fetch the fields. But I think it is not possible.

Well, your answer verifies my solution in mind so thanks.

#4

You could also fetch page information via AJAX from the API I guess … but then again, it’s just text, right :slight_smile:

#5

Blockquote[quote=“daybugging, post:4, topic:14385”]
You could also fetch page information via AJAX from the API I guess … but then again, it’s just text, right :slight_smile:
[/quote]

Actually I’ll be fetching the cover image as well. I don’t know how much impact will those images add on the page load. I have more than 50 items so 50 images from thumbnail and 50 images for the hidden details. I could lazy load the images though.

I’m going to read about AJAX maybe it’s a better fit for me.

Thank you.

#6

Lazyloading on image-heavy sites is always viable, true. I don’t know your case, but it seems to me that putting everything in the source (and lazyloading images, maybe also text) is preferable.

#7

You can create another div, print “alt” there (same way you did for img), make it hidden by default, and visible on hover. Or you can use something like this https://codepen.io/peiche/pen/vhqym - looks like modal window, but there is no js.

1 Like
#8

If going for a full-page solution, this looks just great, thx for sharing!

1 Like
#9

This is the design and functionality I was after.

14%20PM
Screen Shot 2019-05-27 at 12.01.14 PM.jpg2160×1532 496 KB

#10

Ok, show how it sould look like, when you click (and where to click)?

#11

Another example: http://dabblet.com/gist/1506530

And here a bit changed to show and hide on click:

<label for="toggle-1">I'm a toggle</label>
<input type="checkbox" id="toggle-1">
<div>I'm controlled by toggle. No JavaScript!</div>



<style>
    input[type=checkbox] {
       position: absolute;
       top: -9999px;
       left: -9999px;
    }
    label { 
      -webkit-appearance: push-button;
      -moz-appearance: button; 
      display: inline-block;
      cursor: pointer;
    }

    /* Default State */
    div {
       width: 400px;
       height: 100px;
       line-height: 100px;
       text-align: center;
       display: none;
       background: #eee;
    }

    /* Toggled State */
    input[type=checkbox]:checked ~ div {
       display: block
    }
</style>
#12

Looks yummy …

there’s a dozen CSS only/JS solutions for what looks like an OFF-CANVAS menu < google this badboy!

#13

Yes, you can also do something like this https://codepen.io/bootpen/pen/jbbaRa and I think it’s not a problem to use JS here.

About loading a lot of images: if it’s 50 thumbs on one page, I think it’s not a problem too, as you would load the same image for both of these:

thumbs
thumbs.jpg694×454 101 KB

#14

The right panel is initially hidden. It will be shown when clicked via the thumbnails. Of course, the clicked thumbnail will show its own details.

#15

Btw, the design attached is not mine. I’m using it for inspiration about how would I present the full details.

I can pretty much achieve the functionality, I mean the detail panel, to appear and disappear using JavaScript on click. My initial query was how to fetch the details.
So I think this is considered solved.

As verified by you guys, I will stack all the details within my loop, hide them and show the details of the clicked thumbnail using JavaScript. In addition, I would certainly implement lazy loading here.

Thanks everyone.

1 Like
#16

Will the content in the side panel be just an excerpt of the subpage/product content?
Maybe if it is the full subpage content, it is better to load it with ajax?

#17

Well, the content would be the following:

  • cover image
  • title
  • description
  • price
  • nutrition facts

The content is not really heavy except for the cover image. I will definitely look into ajax. Never used it before so it’s a good way to learn :grinning:

#18

I’d also go for the Ajax solution rather than loading the content of that many items into the page that is probably never needed.

#19

Maybe something like this? It loads full content of subpage with ajax(vanilla)

I’m really not familliar with Ajax, so I asked @pedroborges to built it :wink:

#20

Ajax it is then.

Great. This is the exact functionality I was trying to get. Thank you sir. Do you have some code there for me to start on? :grinning:
I too have 0 ajax experience.