Statamic Livewire Filters
Statamic Livewire Filters

Advanced example

In this more advanced example, you can see the flexibility of the addon by rearranging some components and introducing additional ones:

  • we keep the LfCheckboxFilter for the 'car_brand' Taxonomy field

  • we use another LfCheckboxFilter with the multiselect query scope in order to filter the Checkboxes special_categories field

  • we swap the LfRadioFilter for the 'transmission' field for an LfSelectFilter

  • we also add another LfSelectFilter for the fuel_type Select field

  • an LfRadioFilter for the air_condition Radio field

  • we also added an LfSort component to sort the cars by the seats or doors fields.

Car brand
Special category
Transmission
Fuel type
A/C type
Seats (at least)
2 Value: 2 9
Audi A3 Cabrio
Audi A3 Cabrio
Seats: 4
Doors: 2
Transmission: Manual
Fuel: Unleaded
Audi Q3 Turbo Diesel
Audi Q3 Turbo Diesel
Seats: 5
Doors: 5
Transmission: Manual
Fuel: Diesel
Citroen C4 Grand Picasso Automatic
Citroen C4 Grand Picasso Automatic
Seats: 7
Doors: 5
Transmission: Automatic
Fuel: Diesel
Citroen SpaceTourer Automatic
Citroen SpaceTourer Automatic
Seats: 7
Doors: 5
Transmission: Automatic
Fuel: Diesel
Fiat 500 Cabrio Automatic
Fiat 500 Cabrio Automatic
Seats: 2
Doors: 2
Transmission: Automatic
Fuel: Unleaded
Fiat Panda
Fiat Panda
Seats: 4
Doors: 4
Transmission: Manual
Fuel: Unleaded
Hyundai i10
Hyundai i10
Seats: 4
Doors: 4
Transmission: Manual
Fuel: Diesel
Hyundai i10 Automatic
Hyundai i10 Automatic
Seats: 4
Doors: 4
Transmission: Automatic
Fuel: Unleaded

Example's code

        
        <div class="my-8 xl:my-12 not-prose">
    <div class="mb-4 flex justify-end">
        {{ livewire:lf-sort
            blueprint="cars.car"
            fields="seats|doors"
        }}
    </div>
    <div class="flex">
        <div class="w-1/3 pr-8">
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Car brand
                </div>
                {{ livewire:lf-checkbox-filter
                    blueprint="cars.car"
                    field="car_brand"
                    condition="taxonomy"
                }}
            </div>
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Special category
                </div>
                {{ livewire:lf-checkbox-filter
                    blueprint="cars.car"
                    field="special_categories"
                    condition="query_scope"
                    modifier="multiselect"
                }}
            </div>
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Transmission
                </div>
                {{ livewire:lf-select-filter
                    blueprint="cars.car"
                    field="transmission"
                    condition="is"
                }}
            </div>
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Fuel type
                </div>
                {{ livewire:lf-select-filter
                    blueprint="cars.car"
                    field="fuel_type"
                    condition="is"
                }}
            </div>
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    A/C type
                </div>
                {{ livewire:lf-radio-filter
                    blueprint="cars.car"
                    field="air_condition"
                    condition="is"
                }}
            </div>
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Seats (at least)
                </div>
                {{ livewire:lf-range-filter
                    blueprint="cars.car"
                    field="seats"
                    condition="gte"
                    min="2"
                    max="9"
                    default="2"
                }}
            </div>
        </div>
        <div class="w-2/3">
            {{ livewire-collection:cars paginate="8" }}
        </div>
    </div>
</div>