Car Search Small

Overview

The CarSearchSmall component is a lightweight vehicle search form that provides a simplified interface with basic filtering options. It's designed for minimal space usage while still allowing users to search for vehicles by key criteria.

Installation

The component is part of the Carpose application and requires no separate installation.

Usage

To use the CarSearchSmall component in a standard HTML page:

<div 
  data-carpose-component="car-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/search-results"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIifQ=="
></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-small"
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. Required for redirecting to the full search results page.
data-default-form-state-hash	string	null	Default form state hash to use when initializing the form. If not provided, a new empty form state will be created.

Features

• Filtering by manufacturer, model, and condition

• Real-time vehicle count display

• Search button to redirect to full search results

• Responsive layout that adapts to different screen sizes

Examples

Basic Example

<!-- Basic implementation with required attributes -->
<div 
  data-carpose-component="car-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/vehicles"
></div>

With Default Form State

<!-- Implementation with default form state (pre-selected manufacturer) -->
<div 
  data-carpose-component="car-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/vehicles"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIxIn0="
></div>

Behavior

1. Search Mode:

   • When the search button is clicked, the component redirects to the URL specified in data-search-url-forward with the form state hash appended.

   • The full search page will load with the current filters applied.

2. Form Initialization:

   • The form is initialized with the default state from data-default-form-state-hash if provided.

   • If not provided, an empty form state is created.

3. Real-time Count:

   • As filters are changed, the vehicle count updates in real-time to show available matches.

Integration with CarSearch

The CarSearchSmall component is typically used as an entry point to the full CarSearch component:

1. User selects basic filters (manufacturer, model, condition) in CarSearchSmall

2. User clicks the search button

3. Page redirects to the full CarSearch page with selected filters applied

4. User can further refine their search with additional filters