Carpose.de - Documentation
Carpose.de
  • React Integration
    • Getting Started
    • Demo
  • Car Search Modules
    • Car Search Form
    • Car Search Small
    • Car Search (KI)
    • Car Group
  • Offer Modules
    • Offer Slider
    • Offer Item
  • Misc Modules
    • Employee List
    • Store List
  • Components
    • Image Slider Viewer
    • 360° Interior Viewer
    • 360° Exterior Viewer
    • CO2 Class Label
    • Consumption Box
  • Angular Integration [DEPRECATED]
    • Getting Started
    • Slider
    • 360° Interior Viewer
    • 360° Exterior Viewer
Powered by GitBook
On this page
  • Overview
  • Installation
  • Usage
  • Configuration Attributes
  • Features
  • Wishlist Functionality
  • Examples
  • Behavior
  1. Car Search Modules

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.

PreviousDemoNextCar Search Small

Last updated 5 days ago