In this more advanced example, you can see the flexibility of the addon by rearranging some components and introducing additional ones:
An LfToggleFilter to only show cars registered in 2025.
We keep the LfCheckboxFilter with the advanced view for the Car Brand taxonomy field
We use another LfCheckboxFilter with the multiselect query scope to filter the Special Categories checkbox field
We swap the LfRadioFilter for the Transmission field with an LfSelectFilter
We also add another LfSelectFilter for the Fuel Type select field
An LfRadioFilter for the Air Condition radio field
An LfRangeFilter to filter by Minimum Seats
An LfDualRange slider to select any range of Model Year
An LfCount component to display the number of cars found for each search
And an LfSort component to sort the cars by Seats or Doors
Showing entries
- No results found
1<div id="livewire-collection">
2 <div class="grid grid-cols-12 gap-8 lg:gap-12 xl:gap-16">
3 <div class="col-span-3">
4 <div class="mb-8">
5 {{ livewire:lf-toggle-filter
6 blueprint="cars.car"
7 field="date_of_registration"
8 condition="gte"
9 preset_value="2025-01-01"
10 label="Only new vehicles"
11 }}
12 </div>
13 <div class="mb-8">
14 <div class="mb-2 font-bold">
15 Car brand
16 </div>
17 {{ livewire:lf-checkbox-filter
18 blueprint="cars.car"
19 field="car_brand"
20 condition="taxonomy"
21 view="lf-checkbox-advanced"
22 searchable="true"
23 }}
24 </div>
25 <div class="mb-8">
26 <div class="mb-2 font-bold">
27 Special category
28 </div>
29 {{ livewire:lf-checkbox-filter
30 blueprint="cars.car"
31 field="special_categories"
32 condition="query_scope"
33 modifier="multiselect"
34 }}
35 </div>
36 <div class="mb-8">
37 <div class="mb-2 font-bold">
38 Transmission
39 </div>
40 {{ livewire:lf-select-filter
41 blueprint="cars.car"
42 field="transmission"
43 condition="is"
44 }}
45 </div>
46 <div class="mb-8">
47 <div class="mb-2 font-bold">
48 Fuel type
49 </div>
50 {{ livewire:lf-select-filter
51 blueprint="cars.car"
52 field="fuel_type"
53 condition="is"
54 }}
55 </div>
56 <div class="mb-8">
57 <div class="mb-2 font-bold">
58 A/C type
59 </div>
60 {{ livewire:lf-radio-filter
61 blueprint="cars.car"
62 field="air_condition"
63 condition="is"
64 }}
65 </div>
66 <div class="mb-8">
67 <div class="mb-2 font-bold">
68 Model year
69 </div>
70 {{ livewire:lf-dual-range-filter
71 blueprint="cars.car"
72 field="date_of_registration"
73 min="2019"
74 max="2025"
75 }}
76 </div>
77 <div class="mb-8">
78 <div class="mb-2 font-bold">
79 Seats (at least)
80 </div>
81 {{ livewire:lf-range-filter
82 blueprint="cars.car"
83 field="seats"
84 condition="gte"
85 min="2"
86 max="9"
87 default="2"
88 }}
89 </div>
90 </div>
91 <div class="col-span-9">
92 <div class="mb-4">
93 {{ livewire:lf-count }}
94 </div>
95 <div class="@container">
96 <div>
97 {{ livewire-collection:cars paginate="9" scrollTo="#livewire-collection" }}
98 </div>
99 </div>
100 </div>
101 </div>
102</div>