How do I create a Frontend Filter with Tailor?

Hello OctoberCMS Community,

recently, I am stuck trying to create a simple filter for my Homepage.

I have a projects.yaml blueprint to store all my Projects. Each of those projects can belong to multiple categories. It looks like this:

        label: Type of Project
        type: checkboxlist
            Illustration: Illustration
            Animation: Animation
            Painting: Painting

Projects are implemented under the Markup section like this:

<div class="projects-grid" id="project-list">
        {% for project in projects %}
            <a href="{{ project.slug }}" class="projectlink {{ project.thumbnail_span }}" title="{{ project.title}}">
                <img src="{{ project.thumbnail_image.path }}" alt="Thumbnail image of {{ project.title}}" class="projectthumb">
                <div class="linktext">
                    <h2>{{ project.title}}</h2>
                    <p>{{ project.description}}</p>
        {% endfor %}

Now I have these filter chips on my website.

With those I want to filter through categories, meaning when e.g. two chips are enabled, only projects of those categories would appear to be on the page. And when I change my selection the page would automatically update.

The issue is that I have no clue of how to implement it. But I figured, as always, there has to be an easy and efficient way to do so, I just don’t happen to be knowledgable enough with OctoberCMS/Programming. :sweat_smile:

I would be more than delighted if anyone knows a neat solution to this.
Or any kind of tutorial/example page to see how it works. Sadly, OctoberCMS Tutorials are rare and the Documentation doesn’t help a selftaught person like me a lot yet.

Thanks a lot and have a great day. ^-^

Looks like you’re trying to do the “category” filter. It’s nicely explained here in the “Blog category page” chapter. You can create any kind of filter like it’s shown there :slight_smile:

1 Like

Thank you for the idea. :slight_smile: This goes into the right direction, but I think with this method I cannot apply multiple filters at once. Also, I wouldn’t want the entire page to reload each time so I am looking for an ajax solution, but can’t manage to implement that. :')

my solution would be as follows:
projects are paged 20 per page, each page adds additional projects. filtering is done only via javascript according to my own data-filter attribute. The filtering can be enriched by storing in localstorage with a time stamped expiration

1 Like

Yeah, I also thought of something similar as a workaround. The thing is, there are around 100 projects to filter through (not counting in the ones still coming up). But thank you for the idea, I will likely use that as a workaround, if noone else knows a different solution. ^o^