- Overview
- Installation
-
Usage
- Sorting
- Tags
-
Advanced
- Support & Pricing
- Common Issues
-
Examples
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_categoriesfieldwe swap the LfRadioFilter for the 'transmission' field for an LfSelectFilter
we also add another LfSelectFilter for the
fuel_typeSelect fieldan LfRadioFilter for the
air_conditionRadio fieldan LfRangeFilter to filter by minimum seats
an LfDualRange slider to select any range of model year
we also added an LfSort component to sort the cars by the
seatsordoorsfields.
Car brand
Special category
Transmission
Fuel type
A/C type
Seats (at least)
2
Value: 2
9
Model year
to
Audi A3 Cabrio
Seats:
4
Doors:
2
Transmission:
Manual
Fuel:
Unleaded
Model year:
2020
Audi Q3 Turbo Diesel
Seats:
5
Doors:
5
Transmission:
Manual
Fuel:
Diesel
Model year:
2022
Citroen C4 Grand Picasso Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2022
Citroen SpaceTourer Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2021
Fiat 500 Cabrio Automatic
Seats:
2
Doors:
2
Transmission:
Automatic
Fuel:
Unleaded
Model year:
2021
Fiat Panda
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Unleaded
Model year:
2023
Hyundai i10
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Diesel
Model year:
2023
Hyundai i10 Automatic
Seats:
4
Doors:
4
Transmission:
Automatic
Fuel:
Unleaded
Model year:
2021
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>
