Select field - Get field values from selected fetched page

Kirby 3 Solved ✅
1

Hey all,
I’m trying to make an offers/pricing section, like a three column layout showcasing product details etc.
You see those everywhere so I think you know what I mean.

In my blueprint I have 3 select fields where, for each of them, I can select a page (contains product details).

fields:
  offer1:
    type: select
    options: query
    query:
      fetch: site.find("products").children.listed
  offer2:
    type: select
    options: query
    query:
      fetch: site.find("products").children.listed
  offer3:
    type: select
    options: query
    query:
      fetch: site.find("products").children.listed

Now, from the pages I select I want to get my field values like e.g. product name or price, so that I can display all the information of the 3 pages/producs in the frontend.
I am not quite sure if this is possible and if so, how to do this.

Is there something like <?= $block->offer1()->mypagesfieldname() ?> ?

Thanks!

2 
if ($p = $block->offer1()->toPage()) {
  // get the data from page here
}
1 Like
3

Thanks, this works.
But I have another question regarding this topic.
I wanted to create a preview for this custom block and now I am struggling figuring out how to access the field values in my index.js.

I did this to see what I could work with, but from this I only get “products/product” in my console.
I guess I need to use some method like toPage on it, but I dont know how to.

sectionoffers: {
    computed: {
        offer1() {
            console.log(this.content.offer1);
        },
        offer2() { ... ],
    },
}

I tried the following, which did not work.

offer1() {
    return this.content.offer1.toPage;
},

Would appreciate your help once again. Thank you!

4

That’s “a bit” more complex, see this example in the cookbook: Block factory: Creating your own blocks collection | Kirby CMS

5

I spent about 2 hours trying to understand what’s going on in the cookbook code, that you referred me to. I only finally got parts of it working but it’s enough for now.
First, I turned my select field into a pages field and managed to access the page name and image. This code could probably be a lot cleaner, but this is what works and satisfies me for now.

computed: {
        name1() {
            return this.content.offer1[0].text;
        },
        name2() {
            return this.content.offer2[0].text;
        },
        name3() {
            return this.content.offer3[0].text;
        },
        img1() {
            return this.content.offer1[0].image;
        },
        img2() {
            return this.content.offer2[0].image;
        },
        img3() {
            return this.content.offer3[0].image;
        }
},

I have left out a lot of information but at least, now that I got names and images, I can directly see in the backend what pages / products I have configured.

Edit: I should add if-statements for when I dont have any pages selected.

6

I wonder why you need 3 different fields?

7

I could probably use only one field, because you can select multiple pages - I’m realizing that just now. But the content does not have the exact same styling.
Imagine three columns with pricing/product information - the one in the middle I am highlighting using a different styling.
And also, before I was using select fields, where of course only one option could be selected. Therefore I needed three fields.

8

Well, the styling is independent of whether one field has three items or three fields have one item each.

Yes, I know, but you would need less code if you change it know.

9

Hm, okay I see. I might change and optimize it then. Thanks for your input.