How to filter collection on the front?

[rooselle]

Hi,

I've searched for quite a few hours, on the Statamic doc, in the PR and Discussions of this repo, and the web and asked ChatGPT and Claude, and I couldn't make anything work. I have a list of fabrics that I display on the front (in a template fabrics/index) like so:

    {{ collection :from="mount" paginate="20" as="fabrics" on_each_side="1" }}
        {{ if no_results }}
            <p class="text-center">Aucun tissu trouvé.</p>
        {{ else }}
        <table class="table table-zebra table-pin-rows">
                <thead>
                <tr>
                    <th>Tissu</th>
                    <th>Rangement</th>
                    <th>Propriétaire</th>
                    <th>Catégorie de couleur</th>
                </tr>
                </thead>
                <tbody>

                {{ fabrics }}
                <tr>
                    <th>
                        <a href="{{ url }}" class="link link-hover">{{ title }}</a>
                    </th>
                    <td>{{ storage}}</td>
                    <td>{{ owner.label }}</td>
                    <td>{{ colors }} {{ title }}{{ if next }}, {{ /if }} {{ /colors }}</td>
                </tr>
                {{ /fabrics }}

                </tbody>
            </table>

            <div class="flex justify-center mt-10">
                {{ partial:components/_pagination }}
            </div>
        {{ /if }}
    {{ /collection }}

I would like to be able to filter on the "storage" (and the other fields, but let's take this one as example). I added this form:

            <form action="{{ url }}" method="GET" class="mb-4">
               <select name="storage" class="select select-bordered">
                    <option value="">Tous les rangements</option>
                    {{ collection :from="mount" as="all_fabrics" scope="all" sort="storage:asc" }}
                        {{ all_fabrics unique="storage" }}
                        <option value="{{ storage }}" {{ if {get:storage} == storage }}selected{{ /if }}>{{ storage }}</option>
                        {{ /all_fabrics }}
                    {{ /collection }}
                </select>
                <button type="submit" class="btn">Filtrer</button>
            </form>

When I click on the submit button, the selected option is indeed the one I chose ({get:storage} works as expected), and I have ?storage=<the-value> appended in the URL.

However I do not know how I can do to filter the collection. I've tried various things, like adding :filter:storage="get:storage" or :filter:storage="{get:storage}" to {{ collection :from="mount" paginate="20" as="fabrics" on_each_side="1" }}, or :query="where('storage', get:storage)" or :where="storage:is:{get:storage}". Maybe these are just AI's inventions 🙃 But I guess it would be possible to filter the collection from here, I just don't know how. Or maybe it's actually not possible? If so, how is it possible to filter the collection (preferably without Javascript)?

Thanks a lot for your help! 🙏

PS: I'm going on holidays so if you provide solutions or ask things or whatever, I won't be able to answer you right away. Thanks for your understanding!

[jasonvarga]

:storage:is="get:storage" should do it.

https://statamic.dev/conditions

[rooselle]

As easy as that! Didn't occur to me to look in this page. Thanks a lot!

I managed to get exactly what I wanted by doing that: :storage:is="get:storage ?? ''", so that when there's no get parameter the whole list is displayed.