Car Search Form
Overview
The CarSearch
component is a comprehensive vehicle search form that allows users to filter cars by various criteria and display matching results. It includes pagination, filtering options, and the ability to redirect to a search results page.
Installation
The component is part of the Carpose application and requires no separate installation.
Usage
To use the CarSearch component in a standard HTML page:
Configuration Attributes
The component reads configuration from data attributes on the provided element:
data-carpose-component
string
-
Identifies the component type, must be set to "car-search"
data-api-key
string
-
API key for authentication with the Carpose backend services. Required for data fetching.
data-search-url-forward
string
null
URL to forward to when search button is clicked. If not provided, search results will be displayed inline.
data-force-scroll-to-top
boolean
false
When true, forces window to scroll to the top when changing pages or filters.
data-enable-page-load-focus
boolean
false
When true, enables focus behavior when a page loads.
data-default-form-state-hash
string
null
Default form state hash to use when resetting the form. If not provided, a new empty form state will be created.
data-disable-url-params
boolean
false
When true, disables updating URL parameters with the current form state.
data-wishlist
boolean
false
When true, enables wishlist functionality allowing users to save cars to a favorites list.
Features
Filtering by manufacturer, model, condition, mileage, construction year, engine type, vehicle type, fuel type, store, and price
Additional detailed filters accessible via "weitere Filter anzeigen" button
Real-time vehicle count display
Reset button to clear all filters
Pagination for search results
Responsive layout that adapts to different screen sizes
Wishlist functionality for saving favorite vehicles (when enabled)
Wishlist Functionality
When wishlist functionality is enabled via the data-wishlist="true"
attribute, users can:
Save vehicles to a wishlist that persists between sessions (stored in browser localStorage)
Access saved vehicles through a floating wishlist button that appears in the UI
View all saved vehicles in a slide-out drawer
Select vehicles from their wishlist to send an inquiry
Remove vehicles from their wishlist
Navigate directly to vehicle detail pages from the wishlist
The wishlist integration consists of:
WishlistButton
component added to each car cardWishlistFloatingButton
component displayed in the UI when wishlist is enabledWishlistContext
provider that manages the wishlist state across the application
Example with Wishlist Enabled
Examples
Basic Example
Full Example with All Options
Behavior
Search Mode:
When
data-search-url-forward
is set, clicking the search button redirects to the specified URL with the form state hash appended.When
data-search-url-forward
is null, search results are displayed inline below the form.
URL Parameters:
By default, form state is stored in the URL hash, allowing for bookmark-able and shareable searches.
Set
data-disable-url-params="true"
to disable this behavior.
Form Reset:
The reset button restores form to default state.
The default state is determined by
data-default-form-state-hash
if provided, otherwise a new empty state is created.
Scrolling Behavior:
Control scroll behavior with
data-force-scroll-to-top
anddata-enable-page-load-focus
.
Wishlist Behavior:
Enable wishlist functionality with
data-wishlist="true"
.Wishlist state persists between sessions through localStorage.
Users can send inquiries for multiple vehicles at once from their wishlist.
Pagination:
When inline search results are displayed, results are paginated with 30 items per page.
Pagination controls are shown at the bottom of the results when there are multiple pages.
Last updated