Dynamic filter options based on parent category / Contextual filtering

[eelko-sterk]

We are using a single Statamic collection for all our products. Within this collection, we have around 40 "Product Categories" (Taxonomies). We want to implement layered navigation where the filter options adapt based on a pre-selected "Parent" category.

Example (Automotive):

Parents: Audi, BMW, Volvo

Series (Children): 1-series, 3-series, A1, A3, V40, etc.

The Scenario:
If I am on a landing page specifically for "BMW" and I place a Livewire filter with the initial content filtered to parent == BMW, I want the "Series" filter to only show BMW-related options (1-series, 3-series) and hide options for Audi or Volvo.

My Question:
Is it currently possible to restrict the available filter options based on a parent value or a hardcoded term, without having to create 40 separate Statamic collections?

[afonic]

Hi! This is not possible at the moment.

If you enable enable_filter_values_count you could in theory listen to the params-updated event the addon fires and do something like this:

<!-- Parent filter -->
<livewire:lf-checkbox-filter
    field="category"
    blueprint="events.events"
    condition="taxonomy"
/>

<!-- Music subfilter -->
<div
    x-data="subfilter('taxonomy:category:any', 'music')"
    x-show="visible"
    x-cloak
>
    <livewire:lf-checkbox-filter
        field="music_genre"
        blueprint="events.events"
        condition="taxonomy"
    />
</div>

<!-- Sports subfilter -->
<div
    x-data="subfilter('taxonomy:category:any', 'sports')"
    x-show="visible"
    x-cloak
>
    <livewire:lf-checkbox-filter
        field="sport_type"
        blueprint="events.events"
        condition="taxonomy"
    />
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('subfilter', (paramKey, requiredValue) => ({
        visible: false,
        init() {
            const id = this.$el.querySelector('[wire\\:id]')?.getAttribute('wire:id');

            Livewire.on('params-updated', ([params]) => {
                const values = (params[paramKey] || '').split('|');
                const show = values.includes(requiredValue);

                // Clear the subfilter when hiding it
                if (!show && this.visible && id) {
                    Livewire.find(id).call('clear');
                }

                this.visible = show;
            });
        }
    }));
});
</script>

So you could have different Taxonomies for each brand and only display that one.

It's has been requested more than once so I will try to implement it in the near future.

[afonic]

Just to clarify, you are using a "Parent" field in each taxonomy item ?

[eelko-sterk]

No the "parent" is used in the entry; so we have 1 collection "cars" and within that we use a navigation structure

bmw (the parent of)

• 1-serie (child)
• 2- serie
• 3-serie
  Audi
• A1
• A2
• A3

[afonic]

What's in the taxonomies then ?

[eelko-sterk]

these are the terms of different parents:

1-serie (child)
2- serie
3-serie
Audi
A1
A2
A3