How to do this?

Hello,

I’m developing a site and I would like to implement the same functionality as this page from Kirby website.

Basically, I need to show the contents of whatever Category is clicked on the side. I noticed the page is partially refreshing because I can see the loading animation of the browser but the other contents of the page don’t refresh I guess.

I really never implemented this functionality before. My previous solution was to list all the contents of each category on its own section. But I really like this filtering functionality.

I’m not looking for the exact codes to do it. I just need a heads up on what to read or learn to achieve this.
Is it being done by a js script? php?

Thanks.

There is not JavaScript involved and the page is fully reloaded, it just works with links with a category parameter:

Basically the same as explained in this cookbook recipe: https://getkirby.com/docs/cookbook/content/filtering-with-tags

@texnixe

Thank you so much for these links.
I am now trying to understand the code and process but I was stuck at this code taken from the controller\cookbook.php

if ($category = get('category')) {
    $recipes = $page->recipes($category);
  }

Where did the ->recipes($category) came from? I’m referring to the word “recipes” because it’s not a method (is that what they are called?) like “get”, “title”, etc.

Thanks

It’s defined in a page model

<?php

namespace Kirby\Site\Models;

use Kirby\Cms\Page;

class CookbookPage extends Page
{

    public function recipes(string $category)
    {
        return $this->index()->filter(function ($recipe) use ($category) {
            return $recipe->parent()->slug() === $category ||
                   in_array($category, $recipe->secondary()->split(','));
        });
    }

}

Done! Thank you so much.
I was able to implement what I needed.

Edit:
Now how would I make it so it shows the contents of the first Category upon page load? Currently, it’s showing all grandchildren of the main page.