Remote collections: Show list of data and detail of data in a page

[kresnasatya]

Jigsaw support remote collections. Let's take an example by have a page name events that load list of events.

// data/events.php

<?php

return [
    [
        'type' => 'meetup',
        'name' => 'Event Abc',
        'slug' => 'event-abc',
        'desc' => 'Event goes here',
    ]
];

// config.php

<?php

return [
    // ...
    'collections' => [
        'events' => [
            'items' => function ($config) {
                $events = require_once './data/events.php';
                return collect($events)->map(function ($event) {
                    return [
                        'title' => $event['name'],
                        'desc' => $event['desc'],
                    ];
                });
            },
        ]
    ],
];

// source/events.blade.php

<div>
    @foreach($events as $event)
      <h1><a href="#">{{ $event->title }}</a></h1>
      <p>{{ $event->desc }}</p>
    @endforeach
</div>

Now, here's the difficult part: how to show detail event in a page (e.g. event)? Yesterday, I have confused for couple hours to figure out. I check in Jigsaw documentation but there's no a real and clear example for my case. Luckily, I found the GitHub issue in Jigsaw repo that give me a hint how to solve it.

Let's add filename and extends keys into events collection in config.php.

<?php

return [
    // ...
    'collections' => [
        'events' => [
            'items' => function ($config) {
                $events = require_once './data/events.php';
                return collect($events)->map(function ($event) {
                    return [
                        'title' => $event['name'],
                        'desc' => $event['desc'],
+                      'filename' => $event['slug'],
+                      'extends' => '_layouts.event',
                    ];
                });
            },
        ]
    ],
];

The filename key use as a path to go the detail event. The extends key use as a template that we used for display event detail.

Here's the update of source/events.blade.php.

// source/events.blade.php

<div>
    @foreach($events as $event)
-      <h1><a href="#">{{ $event->title }}</a></h1>
+     <h1><a href="{{ $event->getUrl() }}">{{ $event->title }}</a></h1>
      <p>{{ $event->desc }}</p>
    @endforeach
</div>

I don't set method getUrl() in $event data. I think this is a Jigsaw's feature to inject page metadata to the $event data. It happens because I set filename key previously in config.php.

Next, we create a event.blade.php inside source/_layouts/event.blade.php

// source/_layouts/event.blade.php

<h1>{{ $page->title }}</h1>
<p>{{ $page->desc }}</p>

Why use $page variable instead of $event variable? I have try it before but I get error because Jigsaw doesn't recognize it. Then, I use the $page variable that come from Jigsaw and it works.

Closing statement: Jigsaw has a great feature for fetching data with remote collections but currently Jigsaw doesn't have a clear example how to show detail data from remote collections into a page. I don't realize that filename and extends keys are "magic" in Jigsaw's config.php. Also, I don't realize that $page variable is a "magic" variable from Jigsaw.

If you want to see more detail, you can visit this commit from phpbali-org.github.io repository: phpbali-org/phpbali-org.github.io@e48b3bf.

I hope it helps anyone that have the same problem with me. Thanks.

[husseinalhammad]

I check in Jigsaw documentation but there's no a real and clear example for my case.

These are explained in the docs for remote collections:
https://jigsaw.tighten.com/docs/collections-remote-collections/

If you think it's not clear enough, the docs are open source and you can submit a PR to improve them:
https://github.com/tighten/jigsaw-site/blob/main/source/docs/collections-remote-collections.md