How do I create a Frontend Filter with Tailor?

Questions
,
#1

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:

fields:
    category: 
        label: Type of Project
        type: checkboxlist
        options:
            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="https://website.art/projects/{{ 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>
                </div>
            </a>
        {% endfor %}
    </div>

Now I have these filter chips on my website.

Screenshot 2024-06-04 220619
Screenshot 2024-06-04 220619726Ă—104 7.15 KB

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. ^-^
Robin

#2

Looks like you’re trying to do the “category” filter. It’s nicely explained here https://www.youtube.com/watch?v=_WMH4mlMdjk in the “Blog category page” chapter. You can create any kind of filter like it’s shown there :slight_smile:

1 Like
#3

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. :')

#4

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
#5

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^