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:

<div 
  data-carpose-component="car-search"
  data-api-key="your-api-key"
  data-search-url-forward="/search-results"
  data-force-scroll-to-top="true"
  data-enable-page-load-focus="true"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIifQ=="
  data-disable-url-params="false"
  data-wishlist="true"
></div>

Configuration Attributes

The component reads configuration from data attributes on the provided element:

Attribute	Type	Default	Description
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:

1. Save vehicles to a wishlist that persists between sessions (stored in browser localStorage)

2. Access saved vehicles through a floating wishlist button that appears in the UI

3. View all saved vehicles in a slide-out drawer

4. Select vehicles from their wishlist to send an inquiry

5. Remove vehicles from their wishlist

6. Navigate directly to vehicle detail pages from the wishlist

The wishlist integration consists of:

• WishlistButton component added to each car card

• WishlistFloatingButton component displayed in the UI when wishlist is enabled

• WishlistContext provider that manages the wishlist state across the application

Example with Wishlist Enabled

<div 
  data-carpose-component="car-search"
  data-api-key="your-api-key"
  data-search-url-forward="/search-results"
  data-wishlist="true"
></div>

Examples

Basic Example

<div 
  data-carpose-component="car-search"
  data-api-key="your-api-key"
  data-search-url-forward="/search-results"
></div>

Full Example with All Options

<div 
  data-carpose-component="car-search"
  data-api-key="your-api-key"
  data-search-url-forward="/search-results"
  data-force-scroll-to-top="true"
  data-enable-page-load-focus="true"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIifQ=="
  data-disable-url-params="false"
  data-wishlist="true"
></div>

Behavior

1. 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.

2. 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.

3. 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.

4. Scrolling Behavior:

   • Control scroll behavior with data-force-scroll-to-top and data-enable-page-load-focus.

5. 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.

6. 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.