- Overview
- Installation
-
Usage
- Sorting
- Tags
-
Advanced
- Support & Pricing
- Common Issues
-
Examples
Preset values example
In this example, we have some preset values at the livewire-collection tag. We've preset some values for the car_brand taxonomy and a sort value.
We also used a different template for the cars and added an LfDateFilter in order to allow the user to search by the registration date of our cars.
Date of registration is after
Car brand
Special category
Transmission
Fuel type
Loading...
Please wait.
VW Transporter
Seats:
9
Doors:
5
Registration date:
2020-01-01
VW Caddy
Seats:
7
Doors:
5
Registration date:
2020-01-01
Hyundai i20
Seats:
5
Doors:
4
Registration date:
2021-01-01
Hyundai i30
Seats:
5
Doors:
5
Registration date:
2020-01-01
Toyota Auris STW Diesel
Seats:
5
Doors:
5
Registration date:
2021-01-01
Toyota C-HR Hybrid Automatic
Seats:
5
Doors:
4
Registration date:
2024-01-01
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">
Date of registration is after
</div>
{{ livewire:lf-date-filter
blueprint="cars.car"
field="date_of_registration"
condition="is_after"
}}
</div>
<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>
<div class="w-2/3">
<div class="mb-4">
{{ livewire:lf-tags blueprint="cars.car" fields="date_of_registration|car_brand|special_categories|transmission|fuel_type" }}
</div>
<div>
{{ livewire-collection:cars
paginate="6"
taxonomy:car_brand:any="toyota|hyundai|vw"
sort="seats:desc"
view="preset"
}}
</div>
</div>
</div>
</div>
